reactjs - expect(received).toEqual(expected) - 错误

Question

我正在尝试为 React JS 运行单元测试 - 使用 jest/enzyme。

目前测试失败。不太清楚为什么，也许我没有正确调用 expect(wrapper.find)。这是我测试的一部分:

 File.test.js

   it('renders modal when open flag is true', () => {
 const props = { isOpen: true }; 
 const wrapper = mount(
 <div id="root">
  <Component {...props} />
</div>
);
 wrapper.update();
expect(toJson(wrapper)).toMatchSnapshot();
 expect(wrapper.find('.loa-download-header').exists()).toEqual(true);
expect(wrapper.text()).toContain(' Please enter a password.');
 });
 });

这里是 File.js 的一部分，显示了我正在尝试测试的一段代码作为示例。

 render() {
return (
  <Modal

       <div title="Close Window" className="add-custom-field-close" onClick={() => {this.closeModal()}}><FontAwesome name='xbutton' className='fa-times' /></div>
        </div>
      </div>

      <div className='loa-download-header-wrapper'>
        <div className='loa-download-header'>
          Please enter a password.
          </div>

错误:expect(received).toEqual(expected)

Expected value to equal:
  true
Received:
  false

对代码的任何更正都将非常有帮助谢谢

Answer 1

我花了一些时间将您的代码集成到沙箱中。您的代码有很多更改，我在下面列出了这些更改。我还包括了一些已填写的测试和一些未填写的测试。您应该做的是花一些时间让自己熟悉这些更改，以便您可以containers/LOAs/__tests__ 自己 中填写其余测试。

尽管我为 LOAs 容器编写了一个集成测试，但我鼓励您为较小的 组件 编写一个单元测试，这样您就可以练习模拟 prop 函数，检查它们是否被调用，并确保组件按预期运行。尽管它是多余的，但它会帮助您理解流程、测试什么以及如何测试(对于单元测试，您需要使用 shallowWrap 而不是 mountWrap 函数——或者不使用它们并使用 enzyme 提供的 shallow 和 mount 函数...由你决定)。

工作示例:https://codesandbox.io/s/p3ro0615nm

变化:

• 创建了一个 container处理所有 UI 和 state 变化的组件
• 使用this.setState() callbacks保持 state 和辅助操作同步。同样重要的是，这也减少了不需要的组件闪烁。
• 用过conditional rendering使用 ternary operator
• 用过lodash的 filter、map 和 isEmpty 函数(它们很方便，我更喜欢它们而不是原生 JS 函数)
• 模拟了 2 个 API 调用(注意到我使用了 setTimeout，因为这会影响您的测试)。在 fakeAPI.post 函数中，我添加了一个假密码来检查，因此，提供的密码必须是 12345!
• 添加了选择和取消选择 LOA 的功能。如果需要，您可以使用复选框简化所有这些操作。
• 类 methods 以 handle 开头，而向下传递的方法以 on 开头。
• 将 components/LOAModal/LOAModal.js 分解为更小/可重用的组件，使其更易于阅读
• 添加了 PropType 检查以确保 props 在初始声明期间和跨组件时保持一致。

注意事项:

• 测试的主要部分是了解幕后发生的事情，因此请花时间阅读 documentation ;并在必要时进行更小/更简单的项目，以帮助您熟悉 React 的工作原理。
• 测试时，如果您需要像enzyme 那样查看DOM，那么您可以console.log(wrapper.debug()); 在你的 it 测试中。
• 您可以在 beforeEach() 函数中使用 jest.useFakeTimers() 并在 afterEach 中使用 jest.runAllTimers() () 函数来模拟 setTimeout 函数，而无需等待实时时间过去。
• 非常重要:始终在 Promise(API 调用)之后包含一个 .catch()。如果您不捕获您的 Promise，那么它可能会使您的应用崩溃。