J'ai un bloc de rendu conditionnel dans mon composant React qui est défini comme:
{(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}
/>
}
J'ai écrit un cas de test comme ci-dessous:
it('renders the EditEmailContact component', () => {
wrapper=mount(<EditEmailContact
email={emailState}
handleSecondaryEmailToggle={handleSecondaryEmailToggleFn}
retrieveInputData={retrieveInputDataFn}
handleDelete={handleDeleteFn}
handleSubmitContact={handleSubmitContactFn} />);
});
});
Ainsi, dans mon résultat de test, il montre que la ligne où l'instruction de rendu conditionnel est définie n'est pas testée. Alors, comment puis-je tester le rendu conditionnel?
Vous pouvez créer deux cas de test différents en passant des accessoires à votre composant. Par exemple:
const yourProps = {
email: {
primary: {
isPending: true // create test cases passing a different value
},
},
}
const component = mount(<YourComponent {...yourProps} />)