开发者问题收集

期望（收到）.toEqual（预期） - 错误

2019-02-04
25301
reactjs unit-testing jestjs

我正在尝试使用 jest / digest 运行 React JS 的单元测试。

测试目前失败。不太清楚为什么，也许我没有正确调用 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

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

1个回答

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

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

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

更改 ：

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

注意事项 ：

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