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

带有Promise包装器的setTimeout与Jest async/await不能正常工作

带有Promise包装器的setTimeout与Jest async/await不能正常工作的原因是因为setTimeout是一个异步函数,而Jest的测试环境默认是同步执行的。在Jest中使用async/await来测试异步代码时,需要使用特定的方式来处理setTimeout的延迟执行。

一种解决方案是使用Jest提供的jest.useFakeTimers()方法来模拟时间的流逝。这个方法会替换全局的setTimeout函数,使得在测试中可以控制时间的前进。具体步骤如下:

  1. 在测试文件的顶部,使用jest.useFakeTimers()方法来启用时间模拟功能。
  2. 在测试代码中,使用jest.advanceTimersByTime()方法来推进时间的流逝,以触发setTimeout的回调函数。
  3. 在测试代码中,使用await关键字来等待异步操作完成。

下面是一个示例代码:

代码语言:txt
复制
jest.useFakeTimers();

test('测试带有Promise包装器的setTimeout', async () => {
  const delay = (ms) => {
    return new Promise((resolve) => {
      setTimeout(resolve, ms);
    });
  };

  const mockFn = jest.fn();

  delay(1000).then(mockFn);

  jest.advanceTimersByTime(1000);
  await Promise.resolve(); // 等待异步操作完成

  expect(mockFn).toHaveBeenCalled();
});

在这个示例中,我们使用了jest.useFakeTimers()来启用时间模拟功能。然后,我们定义了一个延迟函数delay,它返回一个Promise对象,在一定时间后执行resolve。我们使用jest.fn()创建了一个mock函数mockFn,并在延迟函数的回调中调用了它。接着,我们使用jest.advanceTimersByTime()方法推进时间的流逝,以触发setTimeout的回调函数。最后,我们使用await Promise.resolve()来等待异步操作完成,确保测试代码正确执行。

需要注意的是,这种解决方案只适用于使用了Promise包装器的setTimeout。如果使用了其他形式的异步函数,可能需要根据具体情况进行调整。

推荐的腾讯云相关产品:腾讯云函数(云原生Serverless计算服务),腾讯云云服务器(弹性计算服务),腾讯云数据库(云数据库服务),腾讯云CDN(内容分发网络服务),腾讯云人工智能(AI服务),腾讯云物联网(IoT服务),腾讯云移动开发(移动应用开发服务),腾讯云对象存储(云存储服务),腾讯云区块链(区块链服务),腾讯云虚拟专用网络(网络安全服务)等。

更多关于腾讯云产品的介绍和详细信息,请访问腾讯云官方网站:腾讯云

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

相关·内容

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

包含:async/await、resolves/rejects、手动调用done。 async/await:可以在传递给it函数前面加上async,这样就和我们写代码时是一样,会依次执行。...日常开发中,我们难免会遇到使用setTimeout\setInterval,刚刚在异步用例中wait函数其实就是通过setTimeout进行包装,这个示例中我们重点分析应该如何测试定时。...方法 用途 useFakeTimers 启动假定定时来替换setTimeout或其他定时 useRealTimers useFakeTimers相反,是恢复真实定时 runAllTimers.../src/example3' describe('setTimeout timeout', () => { it('setTimeoutFunc', async () => { // 启动假定时...导致该错误原因是因为我们在使用runOnlyPendingTimers时,把定时执行到了setTimeout内部,但是内部执行代码是Promise.then,它是一个微任务,微任务会被推到事件队列中

10.3K20

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

Promise事件队列 让我们先来看看被测函数(逻辑有简化): // job-queue.js export class JobQueue { enqueueJob(job) { job.run...虽然从错误信息中我们知道可以通过jest.setTimeout来修改这个默认超时时间,但这个测试用例在实际运行时候也的确需要等待6s,如果我们有什么测试用例需要等待几分钟甚至几小时,那总不能在CI上卡个几小时等待用例通过吧...于是,搜索一番之后,我发现Jest提供了假计时、也即fake timer相关API。 通过jest.useFakeTimers()即可对当前文件启用fake timer。...根据Jest官方文档,调用这个函数后,所有队列中“微任务”都会被立刻执行,这里目的就是保证catch回调能被立刻调用; 使用jest.advanceTimersByTime(6000)代替await...注意我们此时使用是fake timer,因此是无法使用await delay(0)这个方案,因此这会导致我们测试用例在等待setTimeout被回调,而fake timersetTimeout又在等待

6.8K60
  • 使用 Jest 进行前端单元测试

    Jest 默认使用 Jasmine 语法,支持直接使用 Promiseasync/await 进行异步测试,支持对 React 组件进行快照监控, 扩展和集成 Babel 等常用工具集也很方便。...Mock Jest 自带一个 mock 系统,并支持自动和手动 mock。 通常项目中,要测试文件可能带有很多调用依赖,另外单元测试环境和真实环境可也能存在差异,使得脱离真实环境不能直接运行。...而在最后 DOM 操作上由于有 JSDOM 模拟浏览环境,我们可以指定不去 mock jQuery,让其正常执行,并且还能用来辅助测试。 ....在 Jest 中也不用像 mocha 那样通过执行 done 来通知异步结束,而是直接返回 Promiseasync/await 就好。.../await', async () => { const userName = await user.getUserName(4); expect(userName).toEqual('Mark'

    5.6K90

    asyncawait 和 promise

    需要具备前置知识 promise使用经验 浏览eventloop 不过如果是对 ES7 async 不太熟悉,是没关系哈,因为这篇文章会详解 async。...也就是,如果async关键字函数返回不是promise,会自动用 Promise.resolve() 包装。如果async关键字函数显式地返回promise,那就以你返回promise为准。...,async 函数也没啥了不起,以后看到带有 async 关键字函数也不用慌张,你就想它无非就是把return值包装了一下,其他就跟普通函数一样。...图2 调用async1,打印 同步代码console.log('async1 start') 我们说过看到带有async关键字函数,不用害怕,它仅仅是把return值包装成了promise,...Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。

    69610

    JavaScript 高级程序设计(第 4 版)- 期约和异步函数

    0, p); // Promise Promise状态机 Promise是一个有状态对象,且状态私有,不能直接通过JS检测到,也不能通过外部JS代码修改 pending:最初始状态...该错误不能通过try/catch捕获,只能通过拒绝处理程序捕获) 同步/异步执行二元性 代码一旦开始以异步模式执行,则唯一之交互方式就是使用异步结构——更具体地说,就是期约方法 # Promise...()就会包装上一个Promise解决之后值 如果没有显式返回语句,则Promise.resolve()会包装默认返回值undefined 抛出异常会返回拒绝Promise 返回错误值不会触发拒绝行为...关键字会暂停执行异步函数后面的代码,让出JS运行时执行线程 await会尝试“解包”对象值,然后将整个值传给表达式,再异步恢复异步函数执行 await关键字JS一元操作一样,可以单独使用,也可以在表达式中使用...不能再顶级上下文中使用 异步函数特质不会扩展到嵌套函数,异步函数只能直接出现在异步函数定义中 # 停止和恢复执行 JavaScript 运行时在碰到 await 关键字时,会记录在哪里暂停执行。

    1.3K100

    React 组件测试技巧

    React 组件常见测试模式。 注意: 此页面假设你正在使用 Jest 作为测试运行。如果你使用不同测试运行,你可能需要调整 API,但整体解决方案是相同。...) }) ); // 使用异步 act 应用执行成功 promise await act(async () => { render(,...创建一个 DOM 元素作为渲染目标 container = document.createElement("div"); // container *必须* 附加到 document,事件才能正常工作...注意: React 测试库为触发事件提供了一个更简洁助手。 --- 计时 {#timers} 你代码可能会使用基于计时函数(如 setTimeout)来安排将来更多工作。...在这个场景中,你可以使用与它们渲染相对应 act() 来包装更新。

    4.9K00

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

    但这里我们思考一种场景:如果使用done来测试回调函数(包含定时场景,如setTimeout),由于定时我们设置了 一定延时(如 3s)后执行,等待 3s 后会发现测试通过了。...那假如 setTimeout 设置为几百秒,难道我们也要在 Jest 中等几百秒后再测试吗? 显然这对于测试效率是大打折扣!!...({ error: 'id为2用户不存在', }); }); async/await 我们知道async/await其实是Promise语法糖,可以更优雅地写异步代码,jest中也支持这种语法...我们把上面的代码改写一下: // 使用async/await来测试resolve it('async/await来测试resolve', async () => { expect.assertions.../await来测试reject it('async/await来测试reject', async () => { expect.assertions(1); try { await user.getUserById

    5K20

    ES6之asyncawait

    · asyncawait 是建立在Promise机制之上,并不能取代其地位 基本语法: async function demo01() { let result = await Math.random...输出: 返回结果(若 async 定义函数有返回值,相当于Promise.resolve('返回结果')) awaitawait必须出现在 async 函数内部,不能单独使用。   ...·如果awaitPromise 对象会造成异步函数 停止 执行并且 等待 Promise解决,如果等正常表达式则立即执行。   ...毫秒后输出:enough sleep~) } 实例1(模拟当一个请求需要依赖上一个请求返回参数时,asyncawait使用实例): // 模拟异步请求 function sleep...Promise 实例,包装成一个新 Promise 实例,一次性处理n个Promise对象。

    32820

    跨越时空对白——async&await分析

    不过在Promise规范中有一套自己异常处理逻辑,尽管这并不能打破时空上隔离,但由于其将异步异常逻辑封装在回调逻辑中,当Promise状态发生改变时,将错误或异常以回调形式呈现出来 虽然Promise...Generator函数执行必须靠执行,所以才有了co模块,而async函数自带执行。也就是说,async函数执行,普通函数一模一样,只要一行。 更好语义。...进一步说,async函数完全可以看作多个异步操作,包装一个Promise对象,而await命令就是内部then命令语法糖。...async实现原理 本质上是将Generator函数和自动执行包装在一个函数里。...这种写法比较麻烦,等于要求模块使用者遵守一个额外使用协议,按照特殊方法使用这个模块。一旦你忘了要用Promise加载,只使用正常加载方法,依赖这个模块代码就可能出错。

    1.2K21

    前端单元测试之Jest

    ; 沙箱和快速:Jest虚拟化了JavaScript环境,能模拟浏览,并且并行执行; 快照测试:Jest能够对React 树进行快照或别的序列化数值快速编写测试,提供快速更新用户体验; 支持异步代码测试...:支持promises和async/await; 自动生成静态分析结果:不仅显示测试用例执行结果,也显示语句、分支、函数等覆盖率。...Jest异步测试主要分为3种: done函数 return promise async/await done例子如下: function fetchData(call) { setTimeout...和async/await方式,所以用superagent举例,实际项目开发可能会涉及到promise(es6以前写法)和async/await(最新写法),大家可以根据实际情况编写测试代码。.../await', async () => { const res = await superagent.get(target); expect(res).toBeTruthy

    2.7K20
    领券