我的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} />);
});
});
因此,在我的测试结果中,该行显示未定义条件渲染语句的行。那么,如何测试条件渲染?
答案 0 :(得分:5)
您可以创建两个不同的测试用例,以将prop传递到组件。例如:
const yourProps = {
email: {
primary: {
isPending: true // create test cases passing a different value
},
},
}
const component = mount(<YourComponent {...yourProps} />)