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} />);
});
});
したがって、私のテスト結果では、条件付きレンダリングのステートメントが定義されていない行がテストされていないことが示されています。では、条件付きレンダリングをテストするにはどうすればよいですか?
コンポーネントに小道具を渡す2つの異なるテストケースを作成できます。例えば:
const yourProps = {
email: {
primary: {
isPending: true // create test cases passing a different value
},
},
}
const component = mount(<YourComponent {...yourProps} />)