时间戳

首页 > 解决方案 > expect(received).toEqual(expected) - 错误

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

问题描述

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

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

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

标签： reactjsunit-testingjestjs

解决方案

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

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

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

变化：

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

备注：

  • 测试的主要部分是了解幕后发生的事情，因此请花时间阅读文档；并且，如果有必要，做一些更小/更简单的项目来帮助你熟悉 React 是如何工作的。
  • 在测试的时候，如果你需要看到它，DOM那么enzyme你可以console.log(wrapper.debug());在你的it测试里面。
  • 您可以利用函数jest.useFakeTimers()中的beforeEach()函数和函数jest.runAllTimers()中的afterEach()函数来模拟setTimeout函数，而不必等待实时通过。
  • 非常重要：始终在（API 调用）.catch()之后包含一个。Promise如果您不catch遵守承诺，那么它可能会使您的应用程序崩溃。

推荐阅读