Jest和enzyme 前端单元测试工具

什么是Jest?

Jest是一个令人愉悦的JavaScript测试框架,其重点是简单性。

它适用于使用以下项目的项目:Babel,TypeScript,Node,React,Angular,Vue等!

特点

  • 零配置
  • 快照
  • 隔离的
  • 很棒的api

入门

使用yarn以下命令安装Jest :

yarn add --dev jest

或npm:

npm install --save-dev jest

或者全局global安装

例子

function sum(a, b) {
return a + b;
}
module.exports = sum;

覆盖率报告

jest --coverage

生成基本配置

jest --init

语法

匹配器

toBe 普通匹配

test('two plus two is four', () => {
expect(2 + 2).toBe(4);
});
// 用来检测基本数据的相等,对象需要使得toEqual

toEqual

相当于深比较,会递归对象或数组

特殊类型判断

  • toBeNull 仅匹配 null
  • toBeUndefined 仅匹配 undefined
  • toBeDefined 与...相反 toBeUndefined
  • toBeTruthy匹配if语句视为真实的任何内容
  • toBeFalsy匹配if语句视为假的任何内容

异步方法测试

callback 回调

这里需要一个done来调用,然后使用try catch包裹。

test('测试回调异步',(done)=>{
let callback= (res)=>{
expect(res).toBe('this is callback');
}
Ajax(callback)
})

promise

这里主要特指使用Promise的异步方法,回调`callback

test('测试promise的异步操作',()=>{
Post("ok").then((res)=>{
expect(res).toBe('ok');
})
Post("x").catch((res)=>{
console.log(res) expect(res).toBe('error');
})
})

enzyme

nzyme 来自 airbnb 公司,是一个用于 React 的 JavaScript 测试工具,方便你判断、操纵和历遍 React Components 输出。Enzyme 的 API 通过模仿 jQuery 的 API ,使得 DOM 操作和历遍很灵活、直观。Enzyme 兼容所有的主要测试运行器和判断库。

安装与配置

npm install --save-dev enzyme

安装Enzyme Adapter来对应React的版本 npm install --save-dev enzyme-adapter-react-16

babel配置

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer 

// babel.config.js
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
};

shallow 浅渲染

将组件渲染成虚拟DOM对象,只会渲染第一层,子组件将不会被渲染出来,因而效率非常高。

Enzyme.configure({
adapter:new Adapter()
}) test('测试react组件',()=>{
let test = shallow(<Test value="1"/>) console.log(test.find('div').text()) // expect(test.prop('value')).toBe("1");
console.log(test.props())
console.log(test.state())
expect(test.text()).toBe("2")
}) test('测试事件操作',()=>{
let test = shallow(<Test value={1}/>);
test.simulate('click')
console.log(test.state('dv'))
expect(test.text()).toBe("3");
test.simulate('click') expect(test.text()).toBe("4");
})

避免每个文件中都引用adapter,可以在根目录下建个jest.setup.js文件,然后在jest.config.js中指定启动路径。

render 静态渲染

将React组件渲染成静态的HTML字符串,然后使用Cheerio这个库解析这段字符串,并返回一个Cheerio的实例对象,可以用来分析组件的html结构。

mount 完全渲染

将组件渲染加载成一个真实的DOM节点,用来测试DOM API的交互和组件的生命周期,用到了jsdom来模拟浏览器环境。

sinon spy模拟函数

与mock基本相同

安装

npm install sinon --save-dev

let spy = sinon.spy(NumberInput.prototype,'componentWillReceiveProps')//监听生命周期
console.log(spy.calledCount)

本文源码地址:https://github.com/tianxiangbing/share/tree/master/jest

Jest 前端单元测试工具的更多相关文章

  1. 前端自动化测试工具--使用karma进行javascript单元测试(转)

    Karma+Jasmine+PhantomJS组合的前端javascript单元测试工具. 1.介绍 Karma是由Google团队开发的一套前端测试运行框架,karma会启动一个web服务器,将js ...

  2. 前端自动化测试工具doh学习总结(二)

    一.robot简介 robot是dojo框架中用来进行前端自动化测试的工具,doh主要目的在于单元测试,而robot可以用来模仿用户操作来测试UI.总所周知,Selenium也是一款比较流行的前端自动 ...

  3. 前端自动化测试工具doh学习总结(一)

    前言 项目中需要用到前端自动化测试,自己被当作一个探针研究了下目前用的比较多的web自动化测试工具.一开始研究的是的selenium,但由于项目使用了大量的dijit控件,写起testCase来很费劲 ...

  4. 在WebStorm中集成Karma+jasmine进行前端单元测试

    在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...

  5. 前端单元测试框架-Mocha

    引言 随着前端工程化这一概念的产生,项目开发中前端的代码量可谓是'急剧上升',所以在这种情况下,我们如何才能保证代码的质量呢,对于框架,比如React.Vue,因为有自己的语法规则,及时每个开发人员的 ...

  6. 前端构建工具 Gulp.js 上手实例

    在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...

  7. 前端构建工具 Grunt 入门

    之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 A ...

  8. 单元测试工具 - karma

    在离开上一家公司之前,team leader 在我离开前留给了我最后几个关键字:karma,断言库,JASMINE,QUNIT,MOCHA. 可一直拖拖沓沓的,没有去了解.直到今天,才终于抽出心情和时 ...

  9. 使用Jest进行单元测试

    Jest是Facebook推出的一款单元测试工具. 安装 npm install --save-dev jest ts-jest @types/jest 在package.json中添加脚本: “te ...

随机推荐

  1. pycharm工程包导入问题

    当我们将外部的python项目导入pycharm工程中时,会出现同一个包的python文件无法在另一个文件引用的问题: 解决方法如下: 在此设置中,将需要导入的文件或包变为蓝色 步骤:1.点击需要导入 ...

  2. BZOJ 4472 salesman 题解

    题目 某售货员小T要到若干城镇去推销商品,由于该地区是交通不便的山区,任意两个城镇之间都只有唯一的可能经过其它城镇的路线.小T可以准确地估计出在每个城镇停留的净收益.这些净收益可能是负数,即推销商品的 ...

  3. sql select sql查询

    select 一.课上练习代码 1 查询所有学生信息 select * from tb_student; select * from tb_teacher; 2 查询所有课程名称及学分(投影和别名) ...

  4. RADI

    一.RADI分类 radi0: 优势:读性能提升,磁盘利用率百分百 缺点:没有容错,坏一个全坏.写性能下降 radi1 优势:有容错能力 缺点:消耗磁盘 radi5 优势:有容错能力,读写能力提升 缺 ...

  5. extend()和append()的区别

    append()方法用于在列表末尾添加新的对象(对象可以是值或列表),一般用于添加列表项. extend()方法用于在列表末尾追加另一个序列中的多个值.

  6. Asp.Net.Core WebApi 版本控制

    前言 在后端Api的开发过程中,无法避免的会遇到接口迭代的过程,如何保证新老接口的共存和接口的向前的兼容呢,这时候就需要对Api进行版本的控制,那如何优雅的控制Api的版本呢? 开始 Microsof ...

  7. c语言 0与非0

    ------------恢复内容开始------------ 结论: 其它的编程语言中有布尔数据类型,并用百来表示逻辑真和逻辑假,C语言没有这个内置类度型,在C语言中真和假是用整型值来表示知的,0就表 ...

  8. Codeforces - Watermelon

    A. Watermelon time limit per test 1 second memory limit per test 64 megabytes input standard input o ...

  9. 配置附加权限和LDAP

     配置附加权限和LDAP 补充:调整root的权限为rwx(读,写,执行) 步骤:采用数值形式将目录/root的权限调整为rwx------ 1)查看原来的权限 [root@svr7~]#ls -ld ...

  10. java的多线程是如何实现的?和操作系统有什么关系?

    本文是作者原创,版权归作者所有.若要转载,请注明出处.本文只贴我觉得比较重要的源码,其他不重要非关键的就不贴了 本文操作系统是centos7 1.查看 pthread_create 函数显示及其示例 ...