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

Jest无法调用spy on async函数,但函数是在浏览器控制台调用的

Jest是一个流行的JavaScript测试框架,用于编写和运行单元测试。它提供了丰富的功能和API,可以方便地模拟和跟踪函数的调用情况。然而,Jest在处理异步函数时可能会遇到一些限制。

在浏览器控制台调用的函数,通常是通过用户交互或异步事件触发的。而Jest默认情况下是在Node.js环境中运行的,无法直接模拟浏览器环境中的异步行为。因此,当我们尝试使用Jest的spyOn函数来模拟异步函数时,可能会遇到问题。

解决这个问题的一种方法是使用Jest提供的jest.spyOn函数的mockImplementation方法,手动模拟异步函数的返回值。具体步骤如下:

  1. 使用jest.spyOn函数来创建一个函数的模拟版本,并指定要模拟的对象和函数名。
  2. 使用mockImplementation方法来定义模拟函数的实现,可以返回一个Promise对象,以模拟异步函数的行为。
  3. 在测试中调用被模拟的函数,并使用await关键字等待异步操作完成。
  4. 使用expect断言来验证函数的调用情况和返回值。

下面是一个示例代码:

代码语言:txt
复制
// 假设要测试的异步函数为asyncFunc
const asyncFunc = async () => {
  // 异步操作
};

// 创建异步函数的模拟版本
const asyncFuncMock = jest.spyOn(global, 'asyncFunc');

// 定义模拟函数的实现
asyncFuncMock.mockImplementation(() => Promise.resolve('mocked result'));

// 在测试中调用被模拟的函数
test('test async function', async () => {
  const result = await asyncFunc();

  // 验证函数的调用情况和返回值
  expect(asyncFuncMock).toHaveBeenCalled();
  expect(result).toBe('mocked result');
});

// 恢复原始函数
asyncFuncMock.mockRestore();

在上述示例中,我们使用jest.spyOn函数创建了asyncFunc函数的模拟版本,并使用mockImplementation方法定义了模拟函数的实现。在测试中,我们调用了被模拟的函数,并使用await关键字等待异步操作完成。最后,我们使用expect断言来验证函数的调用情况和返回值。

需要注意的是,由于Jest无法直接模拟浏览器环境中的异步行为,因此我们需要手动模拟异步函数的返回值。这样做可能会增加一些额外的工作量,但可以确保测试的准确性。

推荐的腾讯云相关产品:腾讯云函数(云原生Serverless计算服务),腾讯云云数据库MySQL版(关系型数据库服务),腾讯云对象存储(分布式文件存储服务)。

腾讯云函数产品介绍链接地址:https://cloud.tencent.com/product/scf

腾讯云云数据库MySQL版产品介绍链接地址:https://cloud.tencent.com/product/cdb_mysql

腾讯云对象存储产品介绍链接地址:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

C语言ARM中函数调用时,栈如何变化

r0-r3 用作传入函数参数,传出函数返回值。子程序调用之间,可以将 r0-r3 用于任何用途。被调用函数返回之前不必恢复 r0-r3。...---如果调用函数需要再次使用 r0-r3 内容,则它必须保留这些内容。 2. r4-r11 被用来存放函数局部变量。如果被调用函数使用了这些寄存器,它在返回之前必须恢复这些寄存器值。...被调用函数返回之前不必恢复 r12。 4. 寄存器 r13 栈指针 sp。它不能用于任何其它用途。sp 中存放退出被调用函数时必须与进入时值相同。 5....寄存器 r14 链接寄存器 lr。如果您保存了返回地址,则可以调用之间将 r14 用于其它用途,程序返回时要恢复 6. 寄存器 r15 程序计数器 pc。它不能用于任何其它用途。...1.程序在内存分布区域 2.全局变量m赋值 3.保存进入main之前栈底, fp-sp之间当前函数栈 4.函数main栈已经准备好了 5.i入栈 6.j入栈 7.准备函数fun调用, 形参反向入栈

13.8K84

Vue 应用单元测试策略与实践 02 - 单元测试基础

,一般来说就是调用相应模块执行对应函数或方法 Then Assert 断言,这时需要借助就是 Matchers 能力,Jest 还可以扩展自己 Matcher expect 后面的 toBe...}; }); }); 我们可以看到 jest.mock() 方法中第二个参数一个函数,那么我们就可以完全接管整个 ....这时需要注意,该模板所有功能都已经被 Mock 掉,而不会再从原模块当中返回,所以我们就需要重新实现该模块中所有功能。...从上文一些例子当中,我们也可以看到,不管 Fake/Stub/Mock/Spy 最最重要一个原则就是「简单」,因为我们写测试代码,而所依赖模块就应该以最简单形态展现出来,绝不要给 jest.fn...唯一需要注意, 额外expect.assertions(number) 其实是验证测试期间所调用断言数量,这在测试多层异步代码时很有用,以确保实际调用回调中断言次数。 意犹未尽吗?

2.2K20

React + Redux Testing Library 单元测试

}; }); }); 我们可以看到 jest.mock() 方法中第二个参数一个函数,那么我们就可以完全接管整个 ....从上文一些例子当中,我们也可以看到,不管 Fake/Stub/Mock/Spy 最最重要一个原则就是「简单」,因为我们写测试代码,而所依赖模块就应该以最简单形态展现出来,绝不要给 jest.fn...唯一需要注意, 额外expect.assertions(number) 其实是验证测试期间所调用断言数量,这在测试多层异步代码时很有用,以确保实际调用回调中断言次数。...从技术上讲,你可以真实浏览器中运行,但由于不同平台上启动真实浏览器复杂性,更建议使用 JSDOM 虚拟浏览器环境中运行 Node 中测试。...推荐使用 mount 方法依赖于一个名为 jsdom库,它本质上一个完全 JavaScript 中实现 headless 浏览器

2.3K10

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

前两天给一个包含setTimeout调用函数写单元测试,使用fake timer时候遇到了问题,记录一下。...回到我们测试用例,原因也就明确了:调用enqueueJob之后,catch中回调被加入了队列,而随后delay则相当于直接调用了setTimeout(前面说到Promise对象构造时回调函数立刻执行...注意我们此时使用fake timer,因此无法使用await delay(0)这个方案,因此这会导致我们测试用例等待setTimeout被回调,而fake timersetTimeout又在等待...问题解决 稍微思考一下,我们会发现原来测试用例有问题:不论使用真时钟还是假时钟,调用enqueueJob后将时间向前拨3s,并不能证明任务真的恰好在3s后执行了,只能证明3s内执行了,enqueueJob...提供spy函数,对setTimeout函数进行了拦截侦听,被调用时不做任何事。

6.8K60

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

包含:async/await、resolves/rejects、手动调用done。 async/await:可以传递给it函数前面加上async,这样就和我们写代码时一样,会依次执行。...resolves/rejects:Jest会等待异步函数执行完毕该方法应该和async/await配合使用 手动调用done:我们没有调用done之前,当前测试不会结束,直至调用done方法,有点类似回调...,用于代替我们真实函数,可以通过该模块函数提供方法获取调用信息(.mock方法)。...这意味着模块模拟不会包装原始模块,它会完全替换require系统中原始模块。因此,mockRestore可以模拟模块中模拟函数上定义,但是调用它不会恢复原始实现。...,我们总会遇到localStorage、location等等这类内置API使用,而在我们测试环境下因为没有直接在浏览器上操作,所以并不能直接访问此类属性或方法,得益于jsdom,它提供了强大web

10.3K20

如何自动化测试 React Native 项目 (下篇) - 单元测试

最近 enzyme 版本更新后, shallowWrapper component lifecycle 函数也会被正确调用。因此对组件状态测试比较容易。...Reducer测试 Reducer 函数, 因此测试时候只要引入函数, 传入特定参数,判断函数返回是否符合预期即可。 可以利用 jest snapshot test 来判断结果。...action 利用 jest spy 函数, mock const dispatch = jest.fn(), 然后把 dispatch 传给异步 action 函数, 并验证 dispatch...selector 可嵌套只要正确 mock redux state, 最终结果就应该是唯一。 4. Utils 测试 和普通js函数型单元测试没有区别,就不多赘述了。...Logging 测试 我 Logging 测试中把 logger 这个 module 初始化测试时 global mock 了一个 spy 函数

3.2K21

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

done参数,fetchData回调函数调用了done。...Mock 介绍jestmock之前,我们先来思考一个问题:为什么要使用mock函数项目中,一个模块方法内常常会去调用另外一个模块方法。...我们测试中也主要是用到了mock函数提供以下三种特性: 捕获函数调用情况 设置函数返回值 改变函数内部实现 下面,我将分别介绍这三种方法以及他们实际测试中应用。...jest.spyOn() jest.spyOn()方法同样创建一个mock函数,但是该mock函数不仅能够捕获函数调用情况,还可以正常执行被spy函数。...实际上,jest.spyOn()jest.fn()语法糖,它创建了一个和被spy函数具有相同内部代码mock函数。 Snapshot 快照测试 所谓snapshot,即快照也。

5K20

实例入门 Vue.js 单元测试

端到端(浏览器等真实场景中走通功能而把程序当成黑盒子测试)与集成测试(集合多个测试过单元一起测试)反馈与修复周期比较长、运行速度慢,测试运行不稳定,由于很多时候还要靠人工手动进行,维护成本也很高...', function() { ... }); ... }); 1.6 spy 正如 spy 字面的意思一样,我们用这种“间谍”来“监视”函数调用情况 通过对监视函数进行包装,...可以通过它清楚知道该函数调用过几次、传入什么参数、返回什么结果,甚至抛出异常情况。...配置 Jest 号称自己一个 “Zero configuration testing platform”,只需 npm scripts里面配置了test: jest,即可运行npm test,自动识别并测试符合其规则...虽然 Jest 本身也有一些实现 spy手段, sinon 使用起来更加方便。

2.9K20

对 React 组件进行单元测试

无论代码初始搭建过程中,还是之后难以避免重构和修正bug过程中,常常会陷入逻辑难以梳理、无法掌握全局关联境地。...', function() { ... }); ... }); spy 正如 spy 字面的意思一样,我们用这种“间谍”来“监视”函数调用情况 通过对监视函数进行包装,可以通过它清楚知道该函数调用过几次...= {}; 另外值得一提,由于jest.config.js一个会在npm脚本中被调用普通 JS 文件,而非XXX.json或.XXXrc形式,所以 nodejs 各自操作都可以进行,比如引入...虽然 Jest 本身也有一些实现 spy手段, sinon 使用起来更加方便。 III....所谓异步操作,不考虑和 ajax 整合集成测试情况下,一般都是指此类操作,只用 setTimeout 不行,需要搭配 done 函数使用: //组件中const Comp = (props)

4.3K40

使用 Jest 进行前端单元测试

例如下面这段典型前端业务代码,涉及到网络请求、DOM操作等多个步骤,不在浏览器环境中无法直接执行。 ....除此之外 Jest 也可以结合 enzyme 更好 React 项目中进行测试(enzyme airbnb 开源一个 React 测试工具,通过 Shallow Rendering 实现对... Jest 中也不用像 mocha 那样通过执行 done 来通知异步结束,而是直接返回 Promise 和 async/await 就好。...); }); 环境隔离 Jest 中,不同测试文件分开独立执行,如果担心各种 mock 和 unmock 不同测试用例之间造成冲突,可以按照分类把用例分开放到不同文件内。...下图为 react-native 源项目中执行 verbose jest test 时,控制台实时输出: ? Jest 覆盖率统计: ? 详细报错定位: ?

5.5K90

前端单元测试之Jest

; 沙箱和快速:Jest虚拟化了JavaScript环境,能模拟浏览器,并且并行执行; 快照测试:Jest能够对React 树进行快照或别的序列化数值快速编写测试,提供快速更新用户体验; 支持异步代码测试...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异步测试主要分为3种: done函数 return promise async/await done例子如下: function fetchData(call) { setTimeout

2.7K20

前端单元测试,更进一步

Storybook 则在浏览器环境中,为 UI 组件单独编写和测试提供了可视化、可交互、与具体业务项目无关单独运行环境;无论 web 项目还是混合式桌面应用,都可以不理会繁复项目配置和依赖...Selenium 自动化测试常用工具,新兴 Playwright 显然得到了越来越多青睐;后者还能更好地支持 electron 等桌面开发项目。...play 一下 开发实践中对比几种测试,Jest/vitest 单元测试易于开发人员编写,其运行在命令行下,不够直观;而 Storybook 展示直观,却大部分只能靠开发者人工检查其有效性,由于无法集成到...pre-commit 等开发流程中,也容易重蹈早期 Jasmine 等基于浏览器页面单测用例覆辙 -- 编写简单很容易过时失效。...play 函数对于习惯了写单元测试前端开发者来说并不陌生,或者可以说是零门槛,play 函数代码就是标准单测代码。

1.1K00

jest 单元测试改善老旧 Backbone.js 项目

本身在浏览器里实现模块加载。...单元测试并不严谨,依赖了提供 mock 数据 php 服务器环境 三由于视图层没有很好组件化,从而缺乏对视图组件测试 jest for Backbone 实践 jest 比较新测试框架...另一个难点在于,Backbone.View constructor / initialize “构造函数”中,并不能接受自定义 props 参数。...jest.doMock() 方法,其缺点用了这个就不能用 ES6 import 语法了,配置和使用简要说明如下: // jest.config.jsmoduleNameMapper: { "...总结 jest 灵活配置能力,使其能方便应用于各种类型既有项目的 TDD 开发和重构 之前其他测试框架下用例,可以快速迁移到 jest 中 Backbone.View 视图组件经过 ES6 升级和合理封装后

3.5K10

前端接入单元测试(Node+React)

开发新框架时,直接运行老前端框架单侧用例,如果所有测试用例都通过,则可快速保证内部api一致性,快速验证所有功能。...KarmaKarma 能在真实浏览器中测试,强大适配器,可配置其他单测框架,一般会配合 Mocha 或 Jasmine 等一起使用。每个框架都有自己优缺点,没有最好框架,只有最适合框架。...Augular 默认测试框架就是 Karma + Jasmine,Egg默认测试框架Mocha,而 React 默认测试框架 Jest。.../src/fetch.js'test('fetchPostsList中回调函数应该能够被调用', async () => { expect.assertions(1); let mockFn =...extend, helper等模块编写单元测试,特别是controller重要路由需要做单元测试;控制台和其他React项目可以利用jest工具,针对方法、组件、模块去做单元测试,特别是组件,可以利用快照功能避免多次修改测试用例

3.3K30

Jest:给你 React 项目加上单元测试

大家好,我前端西瓜哥。 Jest 一款轻量 JavaScript 测试框架,它卖点简单好用,由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进行测试。...注释和文档容易忘记修改,测试用例描述永远准确,因为不对就无法通过测试; 可测试性好代码,往往可维护性更好。...Jest 基本使用 我们先写一个简单函数,作为被测试模块。...也支持回调函数风格测试,你需要调用函数传入 done 函数来表明测试完成: test('异步测试', done => { setTimeout(() => { expect('前端西瓜哥...React Testing Library 以用户为角度 测试库,能够模拟浏览器 DOM,将 React 组件挂载上去后,我们使用其提供一些模拟用户操作 API 进行测试。

2.8K20

调试 RxJS 第1部分: 工具篇

当然,只有被订阅 observables 才能通过 spy 进行侦察。 rxjs-spy 公开了一个模块 API 用于代码中调用,还公开了一个控制台 API 供用户浏览器控制台中进行交互。...大多数时候,我都是应用启动代码中早早地调用模块 API spy 方法,然后使用控制台 API 来执行剩下调试工作。...控制台 API 功能 调试时,我通常使用浏览器控制台来检查和操纵标记过 observables 。...模块 API 大部分方法会返回一个拆解函数,它用来解除方法调用控制台中管理这些太麻烦了,所以还有另外一种选择。 调用 rxSpy.undo() 会显示所有调用方法列表: ?...对于我而言,rxjs-spy 确实可以使调试 RxJS 变得有趣起来。 更多信息 rxjs-spy 源码托管 GitHub 上,这里有一个可以操作控制台 API 在线示例。

1.3K40

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

Jest 如何工作我们可能还很陌生,那让我们一起走进 Jest 内心,一同探究单元测试引擎如何工作。...有许多类型测试,很快你就会被术语淹没,长话短说测试分为三大类: 单元测试 集成测试 E2E 测试 我怎么知道要测试什么 测试方面,即使最简单代码块也可能使初学者也可能会迷惑。...expect 一个断言,该语句使用输入 1 和 2 调用被测函数 sum 方法,并期望输出 3。 toBe 一个匹配器,用于检查期望值,如果不符合预期结果则应该抛出异常。...模拟 复杂测试场景,我们一定绕不开一个 Jest 术语:模拟(mock) Jest 文档中,我们可以找到 Jest 对模拟有以下描述:”模拟函数通过抹去函数实际实现、捕获对函数调用,以及在这些调用中传递参数...而 jest.fn 实现也不难,这里我们使用一个闭包 mockFn 把替换函数和参数给存起来,方便后续测试检查和统计调用数据。

7.7K20

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

一、技术选型: Jest + Enzyme + react-hooks-testing-library 1.1 jest JestFaceBook出品前端测试框架,适合用于React和React...* toBeCalledWith:函数是否以某些参数为入参被调用 * assertions:检测用例中有多少个断言被调用,一般用于异步测试 四、Jest 周期函数 写测试用例之前,可以用四个周期函数进行一些处理...Mock函数 单元测试中,有许多对象或函数并不需要真实引用,因此需要mock。...七、Jest 异步测试 Jest单元测试同步,因此面对异步操作如fetch获取数据,需要进行异步模拟测试。...创建一个mock函数,该mock函数不仅捕获函数调用情况,还可以正常执行被spy函数

6.1K30

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

1. async 异步请求处理 一般项目代码中会有不少异步 ajax 请求,例如测试下面 async.js 中代码 import axios from 'axios'; // 传入 callback...: 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', () => {const Util = jest.fn() ... }) 【3】 __mocks__ 中编写同名文件覆盖 __mocks__ 文件除了可以替换 ajax 请求

5.1K85
领券