如何使用 Jest 和 Enzyme 测试组件的条件渲染

Question

我的 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} />);
    });
  });

因此，在我的测试结果中，它显示了定义条件渲染语句的行未测试。那么，如何测试条件渲染呢？

Answer 1

您可以创建两个不同的测试用例，将道具传递给您的组件。例如：

const yourProps = {
    email: {
      primary: {
         isPending: true // create test cases passing a different value
      },

    },
  }

  const component = mount(<YourComponent {...yourProps} />)