文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

前两天给一个包含setTimeout调用的函数写单元测试，在使用fake timer的时候遇到了问题，记录一下。...在启用fake timer的时候，setTimeout、setInterval都会使用Jest提供的假实现，他们不会真正阻塞住测试用例。...相应地，Jest还提供了advanceTimersByTime函数，可以将Jest运行测试用例时的假时钟向前拨动，并“按时”运行之前通过setTimeout、setInterval传入的回调。...(2); }); 我们做了以下改动： 使用jest.runAllTicks代替await delay(0)。...根据Jest的官方文档，调用这个函数后，所有队列中的“微任务”都会被立刻执行，这里的目的就是保证catch回调能被立刻调用； 使用jest.advanceTimersByTime(6000)代替await

6.8K60

使用Jest测试原生TypeScript项目

通过官网的Getting started 我们可以在最下方找到 ts-jest 不难理解，我们需要配的其实就是jest加载到什么样类型的文件，使用什么预处理来处理文件。...如果是js文件我通过babel-jest处理，css则使用jest-css-modules。假如没有这些配置，那import了你的库，库里有引入了高特性的js文件，或者css文件就会编译报错。...写完了测试，给我们的jest.config 多加一行配置，来生成我们的测试报告(Jest内置了 istanbul) javascript module.exports = { // ... collectCoverage...% Funcs函数覆盖率（function coverage）：是否每个函数都调用了？ % Lines行覆盖率（line coverage）：是否每一行都执行了？...总结 至此，你应该对前端UI测试应该大致有一个宏观的了解。 本文没有过多得介绍Jest的用法或者语法，希望可以给不知道如何做测试的朋友们一点方向，自己去尝试找到适合自己项目的才是最好的。

2.9K60
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    使用jest进行单元测试

    今年的不幸与坎坷使我有很长一段时间去思考人生，不想将就了，鲁棒健壮的程序，开发和测试应该是分得很开的，于是我选择jest去做单元测试这件事。...不扯犊子直接说吧，第一点，用数据、用茫茫多的测试用例去告诉使用者，你的程序是多么鲁棒健壮；第二点，把它作为一种素养去培养吧，当你按照一系列规范去做事，那么你做出来的东西，我想是有品质在的。...jest的相关配置 package.json中相关scripts 这里笔者罗列了常用的通用的一些关于jest的脚本，后面测试结果会陆续补充一些测试脚本，以上的脚本都编写在package.json文件下的.../test/caculator.test.js --watch": 单文件监视测试 "test:watchAll": "jest --watchAll": 监视所有文件改动，测试相应的测试。...大致基础类的脚本测试就总结到这里，接下来我们看下jest.config.js的相关配置。

    3.6K60

    使用 Jest 进行前端单元测试

    Jest 默认使用 Jasmine 语法，支持直接使用 Promise 和 async/await 进行异步测试，支持对 React 组件进行快照监控， 扩展和集成 Babel 等常用工具集也很方便。...目前 Jest 已经在 Facebook 开源的 React, React Native 等前端项目中被做为标配测试框架。 下面简单介绍一些 Jest 比较有用的功能和用法。...例如使用 jest.useFakeTimers() 把遇到的计时器挂起，在必要时再使用 jest.runOnlyPendingTimers() 执行掉已经挂起的计时器。...异步支持 如果有使用过 node-tap 之类的老测试框架，在遇到异步情况时候肯定感受过麻烦了。现代的测试框架对异步的支持都是必需的。...最后总结一下，编写可测试的代码，其实可以遵循这几个点来规范： 功能最小化，单一职责的函数 抽离业务逻辑中的公共部分 细分文件依赖 避免函数副作用（不修改实参） 其他还有很多可以优化的点不再阐述，感兴趣的推荐阅读一下

    5.6K90

    JavaScript 测试系列实战（一）：使用 Jest 和 Enzyme 测试 React 组件

    本篇教程是 JavaScript 测试系列实战 的第一篇教程，首先介绍了测试的类型，然后主要通过一个 React 项目教会你如何使用 Jest 编写第一个测试，然后使用 Enzyme 对 React 组件进行浅层渲染...，它接受一个表达式，然后后面可以调用 Matcher 来测试该表达式是否符合条件，例如这里我们就使用了最常用的 toBe Matcher；Jest 还提供了大量的 Matcher，可以帮助我们写出更简洁可读的断言语句...因此这里建议直接使用 npx jest 执行测试。 编写第一组测试 每个测试文件通常有多个测试用例。Jest 允许我们通过 describe 函数对测试用例进行分组，它创建了一个可以组合多个测试的块。...测试文件中使用它。...配置 jest-enzyme 你应该还记得，在刚才的测试代码中，我们还是使用了 Jest 自带的 Matcher（toEqual）。

    3K10

    自动化测试 Jest 的使用总结基础篇

    使用 jest 的原因 随着前端的发展，web的交互越来越复杂，自动化测试是非常有必要融入到开发的流程中，而目前界内普遍通用且比较火的就是有 facebook开发的 Jest 这套工具。...他可以创建测试用例，执行测试，自身还有驱动和mock，且用起来也是很方便，正如 jest 的官网这样描述 jest，Jest is a delightful JavaScript Testing Framework...使用 jest 做回调操作测试需要注意，函数的回掉情况。...钩子函数的使用 钩子执行 再执行测试文件的时候，如果有需要对函数进行特殊处理的可以在执行前和执行后使用钩子函数，beforeEach and afterEach。...条件执行钩子 顾名思义，就是选在什么情况下才触发钩子函数，按需使用。

    2.7K111

    【Web技术】639- Web前端单元测试到底要怎么写？

    我们看到的大多数教程都会讲单元测试的重要性、一些有代表性的测试框架 api 怎么使用，但在实际项目中单元测试要怎么下手？测试用例应该包含哪些具体内容呢？...单元测试部分介绍 先讲一下用到了哪些测试框架和工具，主要内容包括： jest ，测试框架 enzyme ，专测 react ui 层 sinon ，具有独立的 fakes、spies、stubs、mocks...saga 是一种 es6 的生成器函数 - Generator ，我们利用他来产生各种声明式的 effects ，由 redux-saga 引擎来消化处理，推动业务进行。...，我们先来说下测试 saga 的原理。...这个测试用例的步骤就是利用生成器函数一步步的产生下一个 effect ，然后断言比较。 从上面的注释 3、4 可以看到， redux-saga 还提供了一些辅助函数来方便的处理分支断点。

    3.1K30

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

    现在，我们可以使用单元测试来提高自己的代码质量。下面，我将自己在使用Jest和Sinon.js配置和编写单元测试中的收获的经验和踩到的坑进行总结，根据从零开始配置和编写单元测试这一条线来进行分享。...Jest与Sinon.js是什么 Jest是FaceBook推出的一个针对JavaScript进行单元测试的库，它提供了断言、函数模拟等API来对你自己编写的业务逻辑代码进行测试后。...Jest配置 安装依赖包 需要使用Jest，首先你需要进行安装，执行以下命令: npm install jest -D 如果你的项目中存在.babelrc文件（使用了babel 6）时，不论你测试的代码是否通过...编写单元测试 在本章中，我们会针对如何编写单元测试文件进行一个具体的讲解，其中包含： 同步函数测试 异步函数测试 HTTP测试 同时，我们会对当中使用到的Jest和Sinon.js的API会进行简单介绍...异步函数测试 异步函数主要分为两种——Callback方式和Promise方式。这两种方式都很简单，下面我们对两种方式进行具体的介绍。详细内容可以见Jest文档中的测试异步代码。

    3.8K00

    React 单元测试策略及落地

    本文所用技术栈为前端React栈，测试框架与断言工具是jest。文章将略过对测试框架本身的语法介绍，着眼于“为何做”与“最佳实践”的部分。...测试 saga 是负责调用 API、处理副作用的一层。...基于这个发现，我们推出了我们的第二版 saga 测试方案：runSaga + 自定义拓展 jest 的 expect 断言。...最终，使用这个工具写出来的 saga 测试，几近完美： import { put, call } from 'saga-effects' import { Api } from 'src/utils/axios'import...一般来说，我们期望 util 都是纯函数，即是不依赖外部状态、不改变参数值、不维护内部状态的函数。这样的函数测试效率也非常高。测试原则跟前面所说的也并没什么不同，不再赘述。

    1.1K20

    JS不靠谱系列: 写一个验证过期时间的函数,包含jest单元测试

    ---- 前置基础 jest : 这个测试框架非常不错,Facebook 出品 ES5&&ES6 Typescript 我们不讲配置,也不讲其他琐碎,只说实现过程 ---- 思路分析 重心其实就是围绕传参来执行...---- 代码实现 代码不多,只涵盖了这么几种情况,具体看测试的文字描述 函数 js 版本(isDate.js , 暴露isDate函数,接收一个参数) function checkDateTime(d.../src/utils/isDate"; describe("isDate函数测试集合组", () => { test("這種非標準的時間戳只會轉成1970這種,已經過期", () => {...; test("普通字符串會返回fasle", () => { expect(isDate("safdaserw")).toBe(false); }); }); ---- 总结 纯函数测试只要声明推断返回值即可..., 所以单元测试也非常的直白明了..

    2.1K20

    React-Redux-Saga

    Redux-saga 简介redux-saga 和 redux-thunk 一样, 是一个 Redux 中获取存储异步数据的中间件redux-saga 可以直接拦截 dispatch 派发的 action..., 从而实现在执行 reducer 之前执行一些其它操作使用 Redux-saga安装 Redux-saganpm install redux-saga在创建 store 时应用 redux-saga...redux-saga, 需要拦截哪些 dispatch 派发的 action，声明一下，至于什么是生成器可去查看一下博主 JS 流程框架与特性 的标签里面会进行介绍什么是生成器，然后这个陌生的问题就过...，我们继续，创建 saga.js 在当中定义生成器代码，在生成器函数中获取网络数据：import {takeEvery, put} from 'redux-saga/effects'import {GET_USER_INFO...，添加到 Redux 中保存是通过 Saga 提供的 put 方法进行添加即可，在更改 store.js 告诉 saga 中间件的生成器哪些通过 dispatch 派发的 action 需要进行拦截,

    20730

    React-Redux-Saga实现原理

    前言React-Redux-Saga是一个用于处理Redux异步操作的中间件，它的实现原理基于生成器函数（Generator Functions）和事件监听模式。...本文的主题为 saga 的实现原理，那么与其说 sage 的实现原理，不如说在 saga 中如何通过 yield 获取异步返回的结果，在 React-Saga 中如何通过 yield 获取到数据之前，我还是建议去把博主在...好了，废话不多了，首先来看几个示例，对应的这几个案例分别说明了几个注意点，然后我们在实现 saga 中通过 yield 获取异步数据的底层实现代码，第一个示例如，定义了一个生成器函数, 这个函数保存了...result = gen();console.log(result);图片注意点：执行生成器函数并不会执行对应的函数体只要调用一个 next 方法, 就会执行一个 yieldconsole.log(result.next...data = ', data);}然后调用定义的函数获取异步数据，然后在通过拿到的可迭代对象调用 next 方法将获取到的方法，传递给上一次 yield 进行变量赋值，然后我们在自定义生成器函数的 yield

    29650

    变量类型测试函数的使用：八、剩余函数的使用方法

    讲完PHP变量类型测试函数【is_resource】的用法，今天来讲讲PHP变量类型测试函数【is_null、is_scalar、is_numeric、is_callable】的用法。...这可以检查包含有效函数名的变量，或者一个数组，包含了正确编码的对象以及函数名。 如果 name 可调用则返回 TRUE，否则返回 FALSE。...is_callable 参数 name：要检查的回调函数。 syntax_only：如果设置为 TRUE，这个函数仅仅验证 name 可能是函数或方法。...它仅仅拒绝非字符，或者未包含能用于回调函数的有效结构。有效的应该包含两个元素，第一个是一个对象或者字符，第二个元素是个字符。 callable_name：接受“可调用的名称”。...类似的函数还有很多is_array、is_bool、is_callable、is_countable、is_double、is_float、is_int、is_integer、is_iterable、is_long

    1.3K31

    软件测试之学习shell编程函数的使用

    概念： 将程序中多次被调用的相同代码组合起来（函数体），并为其取一个名字（函数名） 作用： 将相同的程序段定义成函数，可以减少整个程序的代码量，提高开发效率 增加程序的可读性、易读性、提升管理效率 可以实现程序功能模块化...，使得程序具备通用性（可移植性） 对于shell来说，linux系统中2000多个命令都可以称为shell的函数，shell的函数存在于内存中，而不是硬盘文件，同时shell还能对函数进行预处理，所以函数的启动比脚本更快...函数的语法： function 函数名 () { 代码 ….....return n } 1、执行shell函数时，不用带function和后面的小括号 2、函数必须先定义才能使用 3、函数中定义的变量是内部变量，不会影响函数外部相同变量的值 eg： function...函数传参及返回： shell函数通过位置参数传参，如： 函数名 参数1 参数2 参数3 参数4。。。当函数执行时，$1对应参数1，$2对应参数2，以此类推。

    51440

    redux-saga

    on the Saga concept 三.核心实现 利用generator，让异步流程控制易读、优雅、易测试 In redux-saga, Sagas are implemented using Generator...以同步形式获取异步操作结果，更符合顺序执行的直觉 以同步形式捕获异步错误，优雅地捕获异步错误 P.S.关于generator与iterator的关系及generator基础用法，可以参考generator（生成器...（Effect的作用见下面术语概念部分） Effect层要实现的东西包括2部分： 业务操作 -> Effect 以Effect creator API形式提供，提供各种语义的用来生成Effect的工具函数...所以添一层描述对象来解决这个问题，测试case中可以简单比较描述对象，实际起作用的Promise由redux-saga内部生成 这样做的好处是单测中不用mock异步方法（一般单测中会把所有异步方法替换掉...（不用mock异步函数），这不很过分 注意，不需要mock异步函数只是简化了单元测试的一个环节，即便使用这种对比描述对象的方式，仍然需要提供预期的数据，例如： // 测试场景直接执行 const iterator

    1.9K41
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券