Question

我正尝试使用jest / enzyme对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（已接收）.toEqual（预期）

Expected value to equal:
  true
Received:
  false

对代码进行任何更正将非常有帮助

Answer 1

我花了一些时间将您的代码集成到沙箱中。您的代码有很多更改，下面列出了这些更改。我还包括了一些已经填写的测试，还有一些没有填写的测试。您应该做的是花一些时间来熟悉这些更改，以便您可以自己完成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 ！
添加了选择和取消选择LOA的功能。如果需要，可以通过复选框简化所有操作。
类methods以handle开头，而向下传递的方法则以on开头。
将components/LOAModal/LOAModal.js分解为更小/可重复使用的组件，以使其更易于阅读
添加了PropType检查以确保道具在初始声明期间和各个组件之间保持一致。

注释：

测试的主要内容是了解幕后发生的事情，因此，请花时间阅读documentation；并在必要时执行较小/较简单的项目，以帮助您熟悉React的工作方式。
进行测试时，如果您需要像DOM一样看到enzyme，则可以在console.log(wrapper.debug());测试中it。
您可以使用jest.useFakeTimers()函数中的beforeEach()和jest.runAllTimers()函数中的afterEach()来模拟setTimeout函数，而不必等待实时传递。
非常重要：始终在.catch()（API调用）之后加入Promise。如果您没有catch您的Promises，则可能会使您的应用程序崩溃。

Expect（receive）.toEqual（expected）-错误

1 个答案: