gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 04:02:15 29 4
gpt4 key购买 nike

我正在尝试为 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

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

最佳答案

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

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

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

变化:

  • 创建了一个 container处理所有 UIstate 变化的组件
  • 使用this.setState() callbacks保持 state 和辅助操作同步。同样重要的是,这也减少了不需要的组件闪烁。
  • 用过conditional rendering使用 ternary operator
  • 用过lodashfiltermapisEmpty 函数(它们很方便,我更喜欢它们而不是原生 JS 函数)
  • 模拟了 2 个 API 调用(注意到我使用了 setTimeout,因为这影响您的测试)。在 fakeAPI.post 函数中,我添加了一个假密码来检查,因此,提供的密码必须是 12345!
  • 添加了选择和取消选择 LOA 的功能。如果需要,您可以使用复选框简化所有这些操作。
  • methodshandle 开头,而向下传递的方法以 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,那么它可能会使您的应用崩溃。

关于reactjs - expect(received).toEqual(expected) - 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54518329/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com