期待（接受）.toEqual（预期） - 错误

Posted 2023-02-04

我试图运行JS作出反应的单元测试 - 用笑话/酶。

该测试是在moment.Not很确定没有为什么，也许我没有正确地调用期望（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>

错误：期待（接受）.toEqual（预期）

Expected value to equal:
  true
Received:
  false

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

答案

我花了一些时间你的代码集成到一个沙盒。有相当你的代码，我在下面列出了一些更改。我还包含了一些测试，已经被填入，有些则不是。你应该做的是花一些时间与这些变化熟悉自己，这样就可以在containers/LOAs/__tests__在测试的其余部分填你自己的。

虽然我写的LOAs集装箱综合测试，我鼓励你写单元测试的小components，让你可以练习嘲讽prop功能检查，如果他们被调用，并确保部件按预期。尽管这将是多余的，它会帮助你理解的流动，要考什么，以及如何测试（单元测试，你要使用shallowWrap而不是mountWrap功能 - 或者不使用他们并使用shallow提供的提供mount和enzyme功能......由你）。

工作示例：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！
• 增加了选择的能力，并取消选择协议书。如果需要，你可以用复选框简化了这一切。
• 类methods与handle开始，而流传下来的方法与on开始。
• 打破了qazxsw POI成更小的/可重用的组件，使其更易于阅读
• 新增components/LOAModal/LOAModal.js检查，以确保道具是在初始宣布和跨组件一致。

笔记：

• 测试的主要部分是理解发生了什么在幕后，所以花时间阅读PropType;并且，如果必要的话，做的更小/更简单的项目，以帮助自己熟悉如何应对工作。
• 测试时，如果你需要看documentation作为DOM看到它，那么您可以在enzyme测试的内部console.log(wrapper.debug());。
• 您可以利用在it函数来模拟jest.useFakeTimers()功能beforeEach()功能和jest.runAllTimers() afterEach()而无需等待实时传递。
• 非常重要：始终包括setTimeout（API调用）后.catch()。如果你不Promise你的承诺，那么它可能会崩溃您的应用程序。