前言 如果你熟悉React和Echarts的话，应该有用到过 echarts-for-react（虽然它现在没有维护了），本文就通过它写的测试用例来学习下如何写单元测试 如何测试function 有如下函数...expect(component.exists()).toBe(true); // 判断是否 只有一层div嵌套 // find()会递归遍历所有子节点 expect(...300px expect(component.getDOMNode().style.height).toBe('300px'); }) 调用getDOMNode()即可 如何测试React...() ② 通过component.props()获取到传到组件上的props ③ 通过expect(function).toBeCalled()，判断函数有被调用 ④ 通过component.setProps...如何测试React组件实例上的属性 ⑧ 如何测试组件上的props ⑨ jest.fn()的作用 ⑩ 如何测试组件已卸载 源码地址（有改动） https://github.com/AttackXiaoJinJin
不知道大家在写前端单测的时候，是否有出现测试代码和测试数据重复冗余的情况？然后不得不写一些函数和类来封装他们的。然而，慢慢地会发现：过度的封装会致使你的测试用例变得越来越难读。...我对这如何适用于编写可维护的测试有不一样的感觉。...你越是想用嵌套来做变量的共享，越是难让人搞懂测试代码的逻辑。...jest-in-case 和 test.each 如果你只是做纯函数的测试，那么你很幸运，因为它们都是最容易测的。你完全可以通过简单的抽象来简化测试代码，让它们在调用时更明显地展示输入和输出内容。...当然这也可以用在一些非纯函数的情况，不过可能要做更多的抽象了。
本文将以创建一个 Confirmation 组件来说明，如何在 React 中如何实现测试驱动开发。...我们首先要检查组件上是否有一个按钮，上面写着“确认”。...现在我们得到了我们想要的组件渲染的 HTML ，现在我想要确保我可以从外部传递这个组件的按钮的回调函数，并确保它们在单击按钮时被调用。...创建一个模拟函数，将其作为“onOk”处理函数传递给组件，模拟单击“确认”按钮，并断言函数已被调用。...例如： 如何出测试 react hooks ？ 如何测试 react 路由？ 如何测试接口？ 希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。
本文将以创建一个 Confirmation 组件来说明，如何在 React 中如何实现测试驱动开发。...我们首先要检查组件上是否有一个按钮，上面写着“确认”。...现在我们得到了我们想要的组件渲染的 HTML ，现在我想要确保我可以从外部传递这个组件的按钮的回调函数，并确保它们在单击按钮时被调用。...创建一个模拟函数，将其作为“onOk”处理函数传递给组件，模拟单击“确认”按钮，并断言函数已被调用。...例如： 如何出测试 react hooks ？ 如何测试react 路由？ 如何测试接口？ 希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。
1.3 组件单测须知 在开始进行组件单测的时候，有几个因素我们需要考虑： 组件是否按照既定的条件 / 逻辑进行渲染 组件的事件回调是否正确 异步接口如何校验 异步执行完毕后的操作如何校验 .........在组件单测中，有的时候我们可能只关注一个函数是否被正确地调用了，或者只想要某个函数的返回值来支持该组件渲染逻辑是否正确，而并不关心这个函数本身的逻辑。...2.3.1 jest.fn() 通过 jest.fn(implementation) 可以创建 mock 函数。如果没有定义函数内部的实现，mock 函数会返回 undefined。...// 定义一个 mock 的函数，因为没有函数体，所以 mockFn 会 return undefined const mockFn = jest.fn(); // mockFn 调用 mockFn(...defaultPrevented 返回是否为事件调用 preventDefault () 方法。 eventPhase 返回当前正在评估事件流处于哪个阶段。 isTrusted 返回事件是否受信任。
rejects：用来取出 promise 为 rejected 时包裹的值，支持链式调用 toHaveBeenCalled()：用来判断 mock function 是否被调用过 toHaveBeenCalledTimes...done参数，在fetchData的回调函数中调用了done。...在单元测试中，我们可能并不需要关心内部调用的方法的执行过程和结果，只想知道它是否被正确调用即可，甚至会指定该函数的返回值。这个时候，mock的意义就很大了。...jest.fn() jest.fn()是创建mock函数最简单的方式，如果没有定义函数内部的实现，jest.fn()会返回undefined作为返回值。...jest.spyOn() jest.spyOn()方法同样创建一个mock函数，但是该mock函数不仅能够捕获函数的调用情况，还可以正常的执行被spy的函数。
的经典格式，我们常常称之为测试三部曲，也可以解释为 3A 即： GWT 3A 说明 Given Arrange 准备测试测试数据，有时可以抽取到 beforeEach When Act 采取行动，一般来说就是调用相应的模块执行对应的函数或方法...想象一下你正在测试一个 Order Class 的 price() 方法，而 price() 方法需要在 Product 和 Customer Class 中调用一些函数。...不需要什么输入输出，只要能在测试的时候验证到 Stub 被调用过就行，也就能够断言到某处代码被执行，从而确定代码被测试所覆盖。...比如说上文中的 video 模块中的 play() 方法已经被 spy 过，那么之后 play() 方法只要被调用过，我们就能判断其是否执行，甚至执行的次数。 如何 Mock 全局的方法？...唯一需要注意的是， 额外的expect.assertions(number) 其实是验证在测试期间所调用的断言数量，这在测试多层异步代码时很有用，以确保实际调用回调中的断言次数。 意犹未尽吗？
在交互测试中，我们主要利用 simulate() API模拟事件，来判断这个元素的 prop 上的特定函数是否被调用， 传参是否正确， 以及组件状态是否发生意料之中的修改。...在最近的 enzyme 版本更新后， shallowWrapper 的 component lifecycle 函数也会被正确的调用。因此对组件状态的测试是比较容易的。...如果你的项目有难以测试的函数/组件， 应该先想着如何refactor，把庞大复杂的逻辑/组件拆分成功能单一的单元， 尽量让一个函数只做一个task。...Reducer测试 Reducer 是纯函数， 因此测试的时候只要引入函数， 传入特定参数，判断函数返回是否符合预期即可。 可以利用 jest 的 snapshot test 来判断结果。...selector 是可嵌套的， 但只要正确的 mock redux state， 最终的结果就应该是唯一的。 4. Utils 测试 和普通的js函数型单元测试没有区别，就不多赘述了。
语句覆盖率（statement coverage）是否每个语句都执行了？ 分支覆盖率（branch coverage）是否每个函数都调用了？...函数覆盖率（function coverage）是否每个if代码块都执行了？ 行覆盖率（line coverage) 是否每一行都执行了？...三个与 Mock 函数相关的API，分别是jest.fn()、jest.spyOn()、jest.mock() jest.fn() - 是创建Mock函数最简单的方式，如果没有定义函数内部的实现...为了测试这个方法，我们应该做到： 我们不需要实际调用axios.get方法，需要将它mock掉 我们需要测试是否调用了axios方法（但是并不实际触发）并且返回了一个Promise对象 返回的Promise...mock的目的： 设置函数返回值 获取获函数调用情况 改变原本函数的内部实现 4. ️
const mockCB = jest.fn() mockTest(true, mockCB) // 函数是否被调用过了 expect(mockCB).toHaveBeenCalled...() // 是否被参数调用 expect(mockCB).toHaveBeenCalledWith(42) // 被调用的次数 expect(mockCB).toHaveBeenCalledTimes...(1) // 函数调用 console.log(mockCB.mock.calls); // 函数调用结果 console.log(mockCB.mock.results); }) 这里结果是...undefined ，因为并没有 mock 函数的实现，所以默认为 undefined。...function expect(setTimeout).toHaveBeenCalledTimes(1) // 一下子执行完所有的 timer jest.runAllTimers() // 是否被调用
但也可以用单元测试检验导航 guards 中调用的函数是否正常工作，并更快的获得潜在错误的反馈。这里列出一些如何从导航 guards 中解耦逻辑的策略，以及为此编写的单元测试。...全局 guards 比方说当路由中包含 shouldBustCache 元数据的情况下，有那么一个 bustCache 函数就应该被调用。...通过将 beforeEach 导出为一个已结耦的、普通的 Javascript 函数，从而让其在测试中不成问题。...为了确定 hook 真的调用了 bustCache 并且显示了最新的数据，可以使用一个诸如 Cypress.io 的端到端测试工具，它也在应用脚手架 vue-cli 的选项中提供了。...组件 guards 一旦将组件 guards 视为已结耦的、普通的 Javascript 函数，则它们也是易于测试的。
fireEvent.change(input, { target: { value: 'search term' } });expect(input).toHaveValue('search term');确保组件响应变化测试组件如何响应状态或.../myFunction';jest.spyOn(myModule, 'myFunction');// 在测试中调用函数myFunction();// 检查函数是否被调用expect(myFunction...).toHaveBeenCalled();// 检查函数调用的具体参数expect(myFunction).toHaveBeenCalledWith(expectedArgs);// 重置模拟myFunction.mockReset...();// 重置并清除模拟的返回值和调用记录myFunction.mockClear();// 恢复原函数myFunction.mockRestore();测试异步逻辑使用async/await和await...使用jest.spyOn代替jest.fn：对于性能敏感的函数，使用jest.spyOn代替jest.fn，因为它更快。
我们通常用得到一份这样的覆盖率报告： 图中对应的列的解释： %stmts：语句覆盖率，指是否每个语句都覆盖到了 %branch：分支覆盖率，指是否每个if代码块都覆盖到了 %funcs：函数覆盖率，指是否每个函数都覆盖到了...it接受2个参数，第一个参数用于描述测试方法，第二参数接受一个函数用于测试。expect用于对结果断言，来判断当前结果是否符合预期。...setTimeout进行包装的，这个示例中我们重点分析应该如何测试定时器。...每个方法都有不同的使用场景，每个API都会生成一个mock模拟函数，Jest对模拟函数提供了很多方法给予我们模拟方法的返回、实现等等，可移至文档参考 jest.fn jest.fn主要是创建一个模拟函数...，用于代替我们的真实函数，可以通过该模块函数提供的方法获取调用信息（.mock方法）。
，你可能很少会调用expect本身，相反，你将使用expect和“matcher”函数来断言关于值的某些内容。...例如如果你想检查一个模拟函数是否被调用，它的参数是非空的: test('map calls its argument with a non-null argument', () => { const...例如，如果你想检查一个模拟函数是否被调用时带有一个数字。...假设我们希望使用事件对象调用onPress函数，我们需要验证的是事件是否有event.x属性和y属性。...要检查对象中深度嵌套的属性，可以使用点表示法或包含深度引用的keyPath的数组。 可选地，你可以提供一个值来检查它是否等于目标对象的keyPath中的值。
想象一下你正在测试一个 Order Class 的 price() 方法，而 price() 方法需要在 Product 和 Customer Class 中调用一些函数。...不需要什么输入输出，只要能在测试的时候验证到 Stub 被调用过就行，也就能够断言到某处代码被执行，从而确定代码被测试所覆盖。...比如说上文中的 video 模块中的 play() 方法已经被 spy 过，那么之后 play() 方法只要被调用过，我们就能判断其是否执行，甚至执行的次数。 如何 Mock 全局的方法？...使用纯函数来执行修改 为了描述 action 如何改变 state tree ，你需要编写 reducers。这也就是 CQRS 中 command（命令）的一种实现。...然后我们就可以使用 Jest 模拟一个 action 的行为再传给 store，而 actionClick 这个伪造函数能够让我们去断言该 action 是否被调用过。
不过，你也可以用单元测试检验导航 guards 中调用的函数是否正常工作，并更快的获得潜在 bugs 的反馈。这里列出一些如何从导航 guards 中解耦逻辑的策略，以及为此编写的单元测试。...全局 guards 假设当路由中包含 shouldBustCache 元数据的情况下，有那么一个 bustCache 函数就应该被调用。...通过将 beforeEach 导出为一个已解耦的、普通的 Javascript 函数，从而让其在测试过程中不成问题。...为了确定 hook 真的调用了 bustCache 并且显示了最新的数据，可以使用一个诸如 Cypress.io 的端到端测试工具，它也在应用脚手架 vue-cli 的选项中提供了，可以被使用。...组件 guards 一旦将组件 guards 视为已解耦的、普通的 Javascript 函数，则它们也是易于测试的。
功能测试，就是对产品的各功能进行验证，根据功能测试用例，逐项测试，检查产品是否达到用户要求的功能。...Mock函数通常会提供以下三种特性： 捕获函数调用情况； 设置函数返回值； 改变函数的内部实现； jest.fn() jest.fn()是创建Mock函数最简单的方式，如果没有定义函数内部的实现，jest.fn...)生成一个mock函数 const fn = jest.fn(); foreach([1, 2, 3], fn); //测试mock函数被调用了3次...expect(fn.mock.calls.length).toBe(3); // 测试第二次调用的函数第一个参数是3 expect(fn.mock.calls[2][0]...当有异步方式运行的代码的时候，Jest需要知道当前它测试的代码是否已经完成，然后它才可以转移动另一个测试中，也就是说，测试的用例一定要在测试对象结束之后才能够运行。
2.3 - 改良 现在你知道如何单独地测试 actions 了。...在 Jest 站点和因特网上有大量如何做的例子。...（要调用的 mutation 或 action）和 payload 被调用了。...我们创建了一个 localVue 并 use 了 Vuex，然后创建了一个 store，传入一个 Jest mock 函数 (jest.fn()) 代替 testMutation。...没有 localVue、没有 Vuex -- 不同于在前一个测试中我们用 testMutation: jest.fn() mock 掉了 commit 后会触发的函数，这次我们实际上 mock 了 dispatch
文件，修改jest: "test": "jest --config jest.config.json --no-cache --colors --coverage" 5.搭建好之后需要写个demo来测试是否正确...%Funcs函数覆盖率（function coverage）：是不是每个函数都调用了？ %Lines行覆盖率（line coverage）：是不是每一行都执行了？...default Button; 组件测试代码： import React from 'react'; //import TestRenderer from 'react-test-renderer';调用...ReactTestUtils.Simulate.click(buttonDom); expect(onClickMock).toHaveBeenCalled(); }); it('点击之后2秒之内是否可用...'); }); test('测试jest.fn()内部实现', () => { let mockFn = jest.fn((num1, num2) => { return num1 * num2
4.1 用例设计首先我们需要确定设计用例的切入点，目前单测社区内比较流行的模式无非TDD和BDD两种：TDD：测试驱动开发，偏向于去测到函数的各个功能运行的结果是否符合预期，由于是通过先写用例去驱动业务逻辑的实现...（入参是a，调用了啥函数必须返回b之类），但是将导出活动时，相应的调用流程和条件描述了出来，这样其他人在接手这块业务时，通过这个用例就能清楚知道在导出活动日志时需求上有些什么限制以及要做的操作。...4.4 用例断言在确定好用例的设计思路和结构之后，我们在用例的校验内容上也做了一些取舍。...Classical风格是尽可能的使用真实对象和函数，让函数以及依赖都真实的执行；相对的，Mockist是想尽办法去mock，主张将所调用的被测函数全部mock。...expect(downloadExcelFile).not.toBeCalled(); })})如上，断言的内容不是函数的实现细节，如参数是否正确，而是只断言行为是否执行，它能尽量保证做到若代码重构后
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
