针对三元运算符的本机反应进行Jest酶测试

时间:2018-07-07 12:38:20

标签: unit-testing react-native jestjs enzyme

我有一个类组件,其功能类似于下图

export class LoginForm extends React.Component {
    renderInput = ({input, icon, label, type, inputProps,meta: {touched, error, warning}}) => {
        let hasError = error !== undefined;

        return (
            <Item error={hasError}
                  style={styles.inputContainer}>
                <Icon
                    active
                    name={icon}
                    style={styles.iconStyle}
                />
                <Input {...input}
                       {...inputProps}
                       style={styles.inputStyle}/>
                {hasError ? <Text>{error}</Text> : <Text/>} // THIS IS LINE 51
            </Item>
        )
    };
    ...
}

我已经编写了用于测试快照和组件的renderInput函数的单元测试,如下所示:

describe('LoginForm Component', () => {
    let wrapper;

    beforeAll(() => {
        wrapper = shallow(<LoginForm/>);
    });

    it('Should match the snapshot', () => {
        expect(wrapper).toMatchSnapshot();
    });

    it('Should produce expected input', () => {
        let options = {
            input: 'input',
            icon: 'icon',
            label: 'label',
            type:'type',
            inputProps:'inputProps',
            meta:{}
        };

        let inputComponent = wrapper
            .instance()
            .renderInput(options);

        let expectedInput = function (options) {
            let hasError = options.meta.error !== undefined;

            return (
                <Item error={hasError}
                      style={styles.inputContainer}>
                    <Icon
                        active
                        name={options.icon}
                        style={styles.iconStyle}
                    />
                    <Input {...options.input}
                           {...options.inputProps}
                           style={styles.inputStyle}/>
                    {hasError ? <Text>{options.meta.error}</Text> : <Text/>}
                </Item>
            )
        };

        expect(inputComponent).toEqual(expectedInput(options));
    })
});

但是,不幸的是,我的测试覆盖范围是说我在第51行发现了行(第一个代码段中标记了第51行)。如何测试hasError三元条件,以便扩大覆盖范围?

enter image description here

0 个答案:

没有答案