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

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

前两天给一个包含setTimeout调用的函数写单元测试,在使用fake timer的时候遇到了问题,记录一下。...是不是两次setTimeout调用的顺序不对呢?...而对于Promise的实现,一个Promise对象创建时传入的回调函数F会被立刻执行,但then和catch中传入的回调会被加入到队列中,在下一轮Tick时才执行(即使F中立刻resolve或reject...相应地,Jest还提供了advanceTimersByTime函数,可以将Jest运行测试用例时的假时钟向前拨动,并“按时”运行之前通过setTimeout、setInterval传入的回调。...根据Jest的官方文档,调用这个函数后,所有队列中的“微任务”都会被立刻执行,这里的目的就是保证catch回调能被立刻调用; 使用jest.advanceTimersByTime(6000)代替await

6.9K60

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

---- 前置基础 jest : 这个测试框架非常不错,Facebook 出品 ES5&&ES6 Typescript 我们不讲配置,也不讲其他琐碎,只说实现过程 ---- 思路分析 重心其实就是围绕传参来执行...字符串: 验证是否是一个datetime格式,亦或者可以转换成识别的格式(比如 2018/08/01) 类型的转换及比较 最后返回布尔值,来确定该值是否有效 ---- 代码测试结果 ?...---- 代码实现 代码不多,只涵盖了这么几种情况,具体看测试的文字描述 函数 js 版本(isDate.js , 暴露isDate函数,接收一个参数) function checkDateTime(d...fasle", () => { expect(isDate("safdaserw")).toBe(false); }); }); ---- 总结 纯函数测试只要声明推断返回值即可, 所以单元测试也非常的直白明了...纯函数的好处就是可以低耦合,虽然我们可以在这里高内聚,比如做续期,请求,路由跳转什么的, 那这样就是一个auth的所有功能了,这不是我想要的, 有不对之处请留言,会及时修正,谢谢阅读

2.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    单元测试(Unit Testing),指的是对程序中的模块(最小单位)进行检查和验证。比如一个函数、一个类、一个组件,它们都是模块。 使用单元测试的优点: 更好地交付高质量代码。...注释和文档容易忘记修改,但测试用例的描述永远是准确的,因为不对就无法通过测试; 可测试性好的代码,往往可维护性更好。...Jest 基本使用 我们先写一个简单的函数,作为被测试的模块。...test 方法创建了一个测试的作用域,该方法有三个参数: 测试的描述。 我们写测试代码的函数。 测试超时时间,默认为 5 秒,有些测试是异步的,我们需要等待。...但 Jest 本身并不支持 React 组件的测试 API,需要使用另外一个内置的 React Testing Library 库来测试 React 组件。

    2.9K20

    前端测试题: 关于箭头函数的描述,错误的是?

    考核内容: 箭头函数的使用注意事项 题发散度: ★★ 试题难度: ★ 解题思路: ES6标准新增了一种新的函数:Arrow Function(箭头函数)。 为什么叫Arrow Function?...因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 关于函数中的 this 箭头函数看上去是匿名函数的一种简写,...但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。...箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj: 函数体内的 this 对象,绑定定义时所在的对象,而不是使用时所在的对象 参考代码: 可以看到,THIS并不是函数本身...,而是指向父级 WINDOW,所以this不是自身函数,而是直接父级;所以错误的是D 答案: D、函数体内的 this 对象,绑定使用时所在的对象

    4.6K10

    一杯茶的时间,上手 Jest 测试框架

    我们能学到什么 Jest怎么4行代码完成一个测试用例 Jest怎么让测试用例覆盖率100% Jest怎么和Typescript完美结合(填坑实录) Jest最锋利的功能 Mock Functions 项目初始化...,我们的第一个测试用例就已经大功告成。...test:描述具体的测试用例,是单元测试的最小单元。 expect: Jest 最终落在了每一个对测试结果的 期望 上,通过 expect 中的返回值或是函数执行结果来和期望值进行对比。...%Branch 分支覆盖率(branch coverage):是不是每个if代码块都执行了? %Funcs 函数覆盖率(function coverage):是不是每个函数都调用了?...2.Jest怎么让测试用例覆盖率达到100% 当我们的功能场景逐渐变得复杂,我们的测试就必须确保测试用例的覆盖率达到一个标准。

    1.9K20

    前端测试题:关于新特性Generator函数的描述,错误的是?

    考核内容: Generator函数的特点 题发散度: ★★★ 试题难度: ★★ 解题思路: Generator 函数是 ES6 提供的一种异步编程解决方案 形式上,Generator 函数是一个普通函数...一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式,定义不同的内部状态 。 Generator 函数的调用方法与普通函数一样,也是在函数名后面加上一对圆括号。...不同的是,调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指针对象 下一步,必须调用遍历器对象的next方法,使得指针移向下一个状态。...总结一下,调用 Generator 函数,返回一个遍历器对象,代表 Generator 函数的内部指针。以后,每次调用遍历器对象的next方法,就会返回一个有着value和done两个属性的对象。...可见使函数暂停执行的关键字是yield,不是return;return语句是使函数停止执行并退出。 答案: D、使用return语句使Generator函数暂停执行,直到next方法的调用

    86110

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

    使用 jest 的原因 随着前端的发展,web的交互越来越复杂,自动化测试是非常有必要融入到开发的流程中,而目前界内普遍通用且比较火的就是有 facebook开发的 Jest 这套工具。...他可以创建测试用例,执行测试,自身还有驱动和mock,且用起来也是很方便,正如 jest 的官网这样描述 jest,Jest is a delightful JavaScript Testing Framework...使用 jest 做回调操作测试需要注意,函数的回掉情况。...但是我在本地上测试的时候,把这个东东给去掉之后,测试还是可以通过。 可能是在某一些场景下。...钩子函数的使用 钩子执行 再执行测试文件的时候,如果有需要对函数进行特殊处理的可以在执行前和执行后使用钩子函数,beforeEach and afterEach。

    2.8K111

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

    本文将尝试用一个重构实例来抛砖引玉,讲解如何对其应用较新的 jest 测试框架,并用 ES6 class 等新手段升级 Backbone.View 视图组件和改善页面结构,希望能对类似项目的改善起到开启思路的作用...通常的 Backbone 项目也可以忽略文中涉及 react 的部分。 升级测试框架 和之前文章中的例子相同,本次依然采用 Jest 作为测试框架。...的单元测试并不严谨,依赖了提供 mock 数据的 php 服务器环境 三是由于视图层没有很好的组件化,从而缺乏对视图组件的测试 jest for Backbone 的实践 jest 是比较新的测试框架...另一个难点在于,Backbone.View 的 constructor / initialize “构造函数”中,并不能接受自定义的 props 参数。...text 插件引入的模板 Backbone.js + Require.js 在测试中的一个小问题是:页面或组件中一般会用 text.js 组件引入模板,其 ES6 形式为: import cardTmpl

    3.5K10

    测试架构师不是一个没有明确定义的岗位

    架构师 架构师是一个并非计算机行业本来就有的词汇,来自于建筑学,英文是Archetect。建筑工程中的架构师是负责整体建筑的架构设计。因此从宏观上看,软件行业的架构师也类似,是负责对整体架构设计。...在软件工程中架构师是一个团队的技术的领头者。主要工作内容出去对项目的整体设计和规划外,也会参与一些实际技术问题的解决和探讨,攻克技术难关,趟平技术线上的坑,使得工程在软件生命周期过程中平稳顺利完成。...在研发领域有各式各样各司其职架构师,负责系统业务的业务架构师、负责基础设备和设施的基础设施架构师,负责公共组件和平台的中间件架构师。 在测试领域只有一个,测试架构师。那么什么才是测试架构师呢?...测试架构师应该都具备跨组织的沟通和推动变革的能力 测试架构师应该有的工作日常内容 审查系统架构、系统构件/组件及其接口关系等的设计 确保系统的可测试性 设计软件系统的测试策略和方法,特别是在系统的性能、...很多公司的测试地位本来就不高,对测试的培养几乎没有。 很多技术好又做测试的人,随着年龄的增长和近些年中年危机的影响,有机会都转向了管理,不在做技术线和测试实践路上的引导者和布道者。

    68220

    为什么 Vue 中的 data 属性是一个函数而不是一个对象?

    在 Vue.js 中,data 属性通常是一个函数而不是一个对象,这是为了确保每个组件实例都有独立的数据副本。以下是详细解释:1....使用函数确保独立性通过将 data 定义为一个函数并返回一个对象,Vue 可以确保每个组件实例都有自己的数据副本。这样可以避免数据污染和意外的副作用。...}; }});在这个例子中,每个组件实例都会调用 data 函数并获得一个新的数据对象,从而确保数据的独立性。3. 性能优化使用函数返回数据对象还可以提高性能。...示例以下是一个完整的示例,展示了如何使用 data 函数来确保每个组件实例都有独立的数据副本: {{ message }}一个函数而不是一个对象,可以确保每个组件实例都有独立的数据副本,从而避免数据污染和意外的副作用,同时提高性能。

    6000

    不是测试人员的“锅”,要怎么“甩”?

    这个BUG不是代码问题,需求是这么定的?这个需求不合理,开发表示拒绝,等等需要测试背的“锅”。 ? 所以从一开始,测试就要关注需求。...如果描述存在歧义,一定要及时纠正并积极改善。有时会遇到概率性的bug,要告诉开发概率是多少,尽可能多的提供重现条件。...3、“这块是别人负责的,我负责的部分没有问题” 解决办法(参考): 如果bug是由开发的项目经理来分发到程序员,那就是项目经理来面对这样的问题,而不是测试。当然,项目经理当然有项目经理的处理办法。...可是,测试遇到这样的问题怎么办呢,把负责相关内容的开发都邀请到一个讨论组里,让他们自己讨论,这样更清楚,不必在测试这里中转。...(也就是开发认为这不是个问题) 解决办法(参考): 测试人员一定比开发要敏感,对bug的容忍度也要低一些。特别是一些不符合用户习惯的bug,开发总觉得无大碍。

    41320

    用Jest来给React完成一次妙不可言的~单元测试

    •总体测试覆盖率不低于60%。•小型测试代码覆盖率应该不小于40%。 小型测试,通常也叫单元测试,一般来说都是自动化实现的。用于验证一个单独的函数,组件,独立功能模块是否可以按照预期的方式运行。...通过测试的手段,确保组件的每一个功能都可以正常的运行,关注质量,而不是让用户来帮你测试。 在编写单元测试的时候,一定会对之前的代码反复进行调整,虽然过程比较痛苦,可组件的质量,也在一点一点的提高。...如果你不是很熟悉单元测试,可能会任务两种都很好。但是实际上 Enzyme 的实现有两个误报的风险: •即使代码损坏,测试也会通过。•即使代码正确,测试也会失败。 让我们来举例说明这两点。...•wrapper:传递一个组件作为包裹层,将我们要测试的组件渲染在其中。这通常用于创建可以重用的自定义 render 函数,以便提供常用数据。•queries:查询绑定。...接下来,我们使用一个新的助手方法 getByText()。这类似于getByTestId()。getByText()选择文本内容,而不是id。

    15K33

    面试官:为什么data属性是一个函数而不是一个对象?

    一、实例和组件定义data的区别 vue实例的时候定义data属性既可以是一个对象,也可以是一个函数 const app = new Vue({ el:"#app", // 对象格式...警告说明:返回的data应该是一个函数在每一个组件实例中 二、组件data定义函数与对象的区别 上面讲到组件data必须是一个函数,不知道大家有没有思考过这是为什么呢?...在我们定义好一个组件的时候,vue最终都会通过Vue.extend()构成组件实例 这里我们模仿组件构造函数,定义data属性,采用对象的形式 function Component(){ } Component.prototype.data...) // 1 产生这样的原因这是两者共用了同一个内存地址,componentA修改的内容,同样对componentB产生了影响 如果我们采用函数的形式,则不会出现这种情况(函数返回的对象内存地址并不相同...) // 0 vue组件可能会有很多个实例,采用函数返回一个全新data形式,使每个实例对象的数据不会受到其他实例对象数据的污染 三、原理分析 首先可以看看vue初始化data的代码,data的定义可以是函数也可以是对象

    3.2K10
    领券