我有一个类组件,其功能类似于下图
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三元条件,以便扩大覆盖范围?