如何使用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} />);
    });
  });

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

- pranami

Answer 1

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

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

    },
  }

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

- GibboK

---

@pranami 我很高兴能帮到你！祝你编程愉快！ - GibboK

顺便说一下，您还可以考虑为此测试用例添加一个快照，例如 expect(component).toMatchSnapshot()。 - GibboK

我已经添加了一个快照。实际上，我正在测试的组件有很多子组件，大约10-15个吧。所以我有一个疑问：目前我已经将所有子组件导入到我的测试文件中，并尝试在shallow/mount内调用该组件，这样我看到每个文件的覆盖率都在增加。但我想确认一下这是否是正确的方法。您能告诉我我是否做得对吗？ - pranami

另外，我的组件内有一些函数，类似于按钮点击，可以改变状态并打开对话框，那么我该如何测试这些函数呢？ - pranami

@pranami 请创建一个新问题并在这里链接，谢谢！ - GibboK