首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Jest测试包含setTimeout调用函数踩坑记录

前两天给一个包含setTimeout调用函数写单元测试,在使用fake timer的时候遇到了问题,记录一下。...相应地,Jest还提供了advanceTimersByTime函数,可以将Jest运行测试用例时的假时钟向前拨动,并“按时”运行之前通过setTimeout、setInterval传入的回调。...根据Jest的官方文档,调用这个函数后,所有队列中的“微任务”都会被立刻执行,这里的目的就是保证catch回调能被立刻调用; 使用jest.advanceTimersByTime(6000)代替await...提供的spy函数,对setTimeout函数进行了拦截侦听,被调用时不做任何事。...断言通过后,我们再手动调用传入的回调函数模拟6s已经经过的场景。

6.6K60
您找到你想要的搜索结果了吗?
是的
没有找到

提高代码质量——使用Jest和Sinon给已有的代码添加单元测试

Jest与Sinon.js是什么 Jest是FaceBook推出的一个针对JavaScript进行单元测试的库,它提供了断言、函数模拟等API来对你自己编写的业务逻辑代码进行测试后。...'hjava' let callback = jest.fn(); // jest是一个注册的全局变量 handleUserData(callback); expect...(callback.mock.calls.length).toBe(1); // 判断callback函数调用了一次 expect(callback.mock.calls[0][0]).toBe...('hjava'); // 判断了callback函数的第一次被调用的第一个参数为'hjava' }); 从上面的示例中我们可以看到,针对同步的纯函数,我们可以通过很简单的单元测试模型来验证它的功能。...": [ // 指定统计单元测试覆盖率文件 "**/src/**.js" ], } } 如何设置单元测试文件不使用ES2015配置 如果你的项目中有.babelrc文件,而你希望单元测试文件受到

3.7K00

前端自动化测试实践03—jest异步处理&mock

() => { // 模拟函数的返回,getData 不会真正发起 axios 请求 axios.get.mockResolvedValueOnce({ data: 'hello' }...: true,程序会自动在 mocks 文件夹下找同名文件,省去了手动调用 jest.mock('..../mock'); 4. mock - function 模拟函数调用 对于单元测试,无需关心外部传入的函数的实现,使用 jest.fn 生成一个 mock 函数,可以捕获函数调用和返回结果,以及this.../mock' test('测试 callback', () => { // 【1】使用 jest 生成一个 mock 函数 func1,用来捕获函数调用 const func1 = jest.fn.../es6-class') jest.mock 如果发现是一个类,会自动把构造函数和方法变成 jest.fn() 以提升性能,相当于执行了 const Util = jest.fn() Util.a =

5.1K85

干货 | 携程租车React Native单元测试实践

toBeLessThan:小于 * toBeLessThanOrEqual:小于等于 * toMatch:正则表达匹配 * resolves/reject:测试promise * toBeCalled:函数是否被调用...* toBeCalledWith:函数是否以某些参数为入参被调用 * assertions:检测用例中有多少个断言被调用,一般用于异步测试 四、Jest 周期函数 在写测试用例之前,可以用四个周期函数进行一些处理...('InteractionManager'); 六、Jest UI快照测试 Jest提供了snapshot快照功能用于UI测试,可以创建组件的渲染快照并将其与以前保存的快照进行比较,如果两者匹配,则测试失败...七、Jest 异步测试 Jest单元测试是同步的,因此面对异步操作如fetch获取数据,需要进行异步的模拟测试。...创建一个mock函数,该mock函数不仅捕获函数调用情况,还可以正常的执行被spy的函数

6K30

JavaScript测试教程–part 4:模拟 API 调用模拟 React 组件交互

JavaScript测试教程–part 4:模拟 API 调用模拟 React 组件交互 今天,我们进一步测试 React 组件。它涉及模拟组件交互和模拟 API 调用。你将学到两种方法,开始吧!...,因为我们希望发出实际的请求。...Node 的某些核心模块(例如 fs 或 path ),则需要在模拟文件中明确调用 jest.mock('moduleName') Jest 允许我们对函数进行监视:接下来测试是否调用了我们所创建的...spyOn 函数返回一个 mock函数。有关其功能的完整列表,请阅读文档。我们的测试检查组件在渲染和运行之后是否从模拟调用 get函数,并成功执行。...,请记住清除每个测试之间的模拟调用,例如通过运行 getSpy.mockClear(),否则函数调用的次数将在测试之间保持不变。

3.7K10

React 设计模式 0x8:测试

如果快照匹配,则测试将失败。 # 使用 Cypress 进行端到端(e2e)测试 当涉及端到端测试时,Cypress 在其他框架/库中处于领先地位。...模拟函数 使用 模拟函数 来侦测(查看)我们的函数调用的情况,或者使用它来测试单个函数或整个模块。...在 Jest 中有以下三种类型的模拟函数Jest.fn(用于模拟单个函数) Jest.mock(用于模拟整个模块) Jest.spyOn(用于查看函数调用情况) 更多信息请访问 https://jestjs.io...React 组件的工具和函数 编写测试用例 编写完整的测试用例,覆盖组件的所有代码路径,包括正常情况和异常情况 使用快照测试 使用 Jest 中的快照测试功能来验证组件是否按预期呈现 使用模拟数据...使用模拟数据来测试组件,以确保它们在不同的数据情况下都能正常工作 使用模拟函数 使用模拟函数模拟组件的依赖项和外部接口,以便更好地控制测试环境 集成测试 编写集成测试来测试应用程序的整个流程

1.8K10

【干货分享】微信小程序单元测试攻略

2,被测代码包含复杂的环境因素需要处理或模拟,例如使用了storage、调用了接口、使用了环境变量等。 (图片来源:码农翻身公众号) 但无论如何,有价值的东西就应该去做,不应该知难而退嘛。...该方法和sinon.spy一样,生成函数的“间谍”,可以断言该函数的已调用次数、调用入参、调用返回等是否符合预期。...2.3.3 完整的断言方法 2.3.4 模拟数据mock 当被测方法包含环境因素不能直接测试时,例如使用了localStorage,又或者被测方法调用了接口,希望测试时调用接口影响业务或降低测试速度...` }, //API 参数 { data: {} } //API 返回结果); 模拟storage调用示例2: const mockStorage = { get: jest.fn...函数覆盖率(function coverage):是否每个函数调用了? 3. 分支覆盖率(branch coverage):是否每个if代码块都执行了? 4.

2.6K40

Jest单元测试之旅—实践总结

resolves/rejects:Jest会等待异步函数执行完毕该方法应该和async/await配合使用 手动调用done:在我们没有调用done之前,当前测试不会结束,直至调用done方法,有点类似回调...第二:我们测试某个方法时,可能当前方法会夹杂对其他外部方法的调用,如果外部方法并不是一个纯函数,此时我们不应该再对外部方法再进行测试,而是通过Mock方式去模拟它。...每个方法都有不同的使用场景,每个API都会生成一个mock模拟函数Jest模拟函数提供了很多方法给予我们模拟方法的返回、实现等等,可移至文档参考 jest.fn jest.fn主要是创建一个模拟函数...这意味着模块模拟不会包装原始模块,它会完全替换require系统中的原始模块。因此,mockRestore可以在模拟模块中的模拟函数上定义,但是调用它不会恢复原始实现。...模拟部分函数,这里使用了jest.requireActual,该方法主要是绕过模拟模块导出真实模块,然后通过jest.mock的工厂函数重新去定义该模拟模块的内容,这种方式就可以指定导出的模块具体哪些方法需要被模拟

10.2K20

那些年错过的React组件单元测试(上)

当有异步代码的时候,测试代码跑完同步代码后立即结束,而是等结束的通知,当异步代码执行完后再告诉jest:“好了,异步代码执行完了,你可以结束任务了”。...如果test函数传入了done,jest就会等到done被调用才会结束当前的test case,如果done没有被调用,则该test自动不通过测试。...Mock 介绍jest中的mock之前,我们先来思考一个问题:为什么要使用mock函数? 在项目中,一个模块的方法内常常会去调用另外一个模块的方法。...然后调用axios.get的时候,不会真实的请求这个接口,而是会以我们写的{ data: ['Cosen','森林','柯森'] }去模拟请求成功后的结果。...jest.spyOn() jest.spyOn()方法同样创建一个mock函数,但是该mock函数不仅能够捕获函数调用情况,还可以正常的执行被spy的函数

4.9K20

万字详文:彻底搞懂 Jest 单元测试框架

什么是Jest 测试意味着什么 我怎么知道要测试什么 测试块,断言和匹配器 如何实现测试块 如何实现断言和匹配器 CLI 和配置 模拟 怎么模拟一个函数 执行环境 作用域隔离 V8 虚拟机 运行单测回调...模拟 在复杂的测试场景,我们一定绕不开一个 Jest 术语:模拟(mock) 在 Jest 文档中,我们可以找到 Jest模拟有以下描述:”模拟函数通过抹去函数的实际实现、捕获对函数调用,以及在这些调用中传递的参数...,使测试代码之间的链接变得容易“ 简而言之,可以通过将以下代码片段分配给函数或依赖项来创建模拟jest.mock("fs", { readFile: jest.fn(() => "wscats"...), }); 这是一个简单模拟的示例,模拟了 fs 模块 readFile 函数在测试特定业务逻辑的返回值。...而 jest.fn 的实现也不难,这里我们使用一个闭包 mockFn 把替换的函数和参数给存起来,方便后续测试检查和统计调用数据。

7.6K20

Jest基本使用方法以及mock技巧介绍

Teardown),同时也包括测试范围; 匹配表达式(Matchers):能使用期望expect句法来验证不同的内容; 测试异步代码:支持承诺(promise)数据类型和异步等待async / await功能; 模拟函数...:可以修改或监查某个函数的行为; 手动模拟:测试代码时可以忽略模块的依存关系; 虚拟计时:帮助控制时间推移。...2  Jest的mock技巧介绍 2.1  基本的mock 2.1.1  Mock一个函数 方法的mock 非常简单,使用jest.fn 就可以非常简单的mock一个函数。...如下面的例子:代码里面有一个函数叫forEach。 ? 此函数可以简单使用下面方法mock,并且jest提供一些方法可以确保查看mock函数调用的情况: ?...注意:如果我们需要mock node的核心模块(如fs或者path),那么还是需要显示的调用jest.mock('path') , 因为核心的node模块默然是不被mock的。

8.2K50

JavaScript 测试系列实战(三):使用 Mock 模拟模块并处理组件交互

编写 axios 模块的 mock 文件 Jest 支持对整个模块进行 Mock,使得组件不会调用原始的模块,而是调用我们预设的 Mock 模块。...通过 spyOn 函数检查 Mock 模块调用情况 让我们开始 Mock 起来!...首先通过 jest.spyOn,我们便可以监听一个函数的使用情况,然后使用配套的 toBeCalled Matcher 来判断该函数是否被调用。整体代码十分简洁,同时也保持了很好的可读性。...我们可以通过阅读错误消息找出原因: 无效的 Hooks 调用, Hooks 只能在函数式组件的函数体内部调用。...让测试通过 React文档[3] 里面提到:我们只能从函数式组件或其他 Hooks 中调用 Hooks。

4.8K20

对 React 组件进行单元测试

', function() { ... }); ... }); spy 正如 spy 字面的意思一样,我们用这种“间谍”来“监视”函数调用情况 通过对监视的函数进行包装,可以通过它清楚的知道该函数调用过几次...,对 ajax 返回值的模拟、对 timer 的模拟,都叫做 mock 。...用测试驱动 React 组件重构 这里展开讨论经典的 “测试驱动开发”(TDD - test driven development) 理论 -- 简单的说,把测试正向加诸开发,先写用例再逐步实现,就是...(function coverage):是否每个函数调用了 行覆盖率(line coverage):是否每一行都执行了 测试结果根据覆盖率被分为“绿色、黄色、红色”三种,应该视具体情况尽量提高相应模块的测试覆盖率...sinon 中有一些模拟 XMLHttpRequest 请求的方法, jest 也有一些第三方的库解决 fetch 的测试; 在我们的项目中,根据实际的用法,自己实现一个类来模拟请求的响应: //FakeFetch.jsimport

4.2K40

C语言与汇编的嵌入式编程:main中模拟函数调用(两数交换)

编写一个两数交换函数swap,具体代码如下: #include void swap(int *p1,int *p2) { int temp; temp = *p1;...首先对main函数进行汇编转换: #include void swap(int *p1,int *p2) { int temp; temp = *p1; *p1...push edx call printf add esp,12 } } 现在需要将swap也转化为汇编,并放入main函数中...,具体思路如下: 1、先对swap函数反汇编,并删除ret指令, 注明:swap函数大致处理过程为:把下个地址压入堆栈,然后参数入栈,然后把所有寄存器压入堆栈,分配空间,空间清C然后变量赋值开始程序然后做堆栈平衡清理堆栈...所以删除swap:和ret后,main里面不再是一个完整的函数,但是又保留了该swap函数的基本功能(即,把下个地址压入堆栈,然后参数入栈,然后把所有寄存器压入堆栈,分配空间,空间清C然后变量赋值开始程序然后做堆栈平衡清理堆栈

93740

Jest + React Testing Library 单测总结

在组件单测中,有的时候我们可能只关注一个函数是否被正确地调用了,或者只想要某个函数的返回值来支持该组件渲染逻辑是否正确,而并不关心这个函数本身的逻辑。...// 定义一个 mock 的函数,因为没有函数体,所以 mockFn 会 return undefined const mockFn = jest.fn(); // mockFn 调用 mockFn(...); // 虽然没有定义函数体,但是 mockFn 被调用过了 expect(mockFn).toHaveBeenCalled(); const res = mockFn('a','b','c');...(fn):重新声明被 mock 的函数 mockFn.mockImplementationOnce(fn) 模拟结果 mockFn.mockReturnThis() mockFn.mockReturnValue...; fireEvent 函数需要两个参数,一个参数是定位的元素 node,另一个参数是 event。这个例子中就模拟了用户点击了 button,同时 fireEvent 有两种写法。

4.5K20
领券