[英]How to test conditional rendering of components using Jest and Enzyme
我的React组件中有一个条件渲染块,定义如下:
{(props.email.primary.isPending) ?
<PendingComponent emailAddress={props.email.primary.pendingEmail} />
:
<SecondaryEmailContact
state={props.email.secondary}
retrieveInputData={props.retrieveInputData}
handleSecondaryEmailToggle={props.handleSecondaryEmailToggle}
handleDelete={props.handleDelete}
handleSubmitContact={props.handleSubmitContact}
refs={props.refs}
/>
}
我写了一个测试用例如下:
it('renders the EditEmailContact component', () => {
wrapper=mount(<EditEmailContact
email={emailState}
handleSecondaryEmailToggle={handleSecondaryEmailToggleFn}
retrieveInputData={retrieveInputDataFn}
handleDelete={handleDeleteFn}
handleSubmitContact={handleSubmitContactFn} />);
});
});
因此,在我的测试结果中,它显示了未定义条件呈现语句的行。 那么,我该如何测试条件渲染?
您可以创建两个不同的测试用例,将props传递给组件。 例如:
const yourProps = {
email: {
primary: {
isPending: true // create test cases passing a different value
},
},
}
const component = mount(<YourComponent {...yourProps} />)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.