Jest 前端单元测试工具
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 前端单元测试工具的更多相关文章
- 前端自动化测试工具--使用karma进行javascript单元测试(转)
Karma+Jasmine+PhantomJS组合的前端javascript单元测试工具. 1.介绍 Karma是由Google团队开发的一套前端测试运行框架,karma会启动一个web服务器,将js ...
- 前端自动化测试工具doh学习总结(二)
一.robot简介 robot是dojo框架中用来进行前端自动化测试的工具,doh主要目的在于单元测试,而robot可以用来模仿用户操作来测试UI.总所周知,Selenium也是一款比较流行的前端自动 ...
- 前端自动化测试工具doh学习总结(一)
前言 项目中需要用到前端自动化测试,自己被当作一个探针研究了下目前用的比较多的web自动化测试工具.一开始研究的是的selenium,但由于项目使用了大量的dijit控件,写起testCase来很费劲 ...
- 在WebStorm中集成Karma+jasmine进行前端单元测试
在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...
- 前端单元测试框架-Mocha
引言 随着前端工程化这一概念的产生,项目开发中前端的代码量可谓是'急剧上升',所以在这种情况下,我们如何才能保证代码的质量呢,对于框架,比如React.Vue,因为有自己的语法规则,及时每个开发人员的 ...
- 前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...
- 前端构建工具 Grunt 入门
之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 A ...
- 单元测试工具 - karma
在离开上一家公司之前,team leader 在我离开前留给了我最后几个关键字:karma,断言库,JASMINE,QUNIT,MOCHA. 可一直拖拖沓沓的,没有去了解.直到今天,才终于抽出心情和时 ...
- 使用Jest进行单元测试
Jest是Facebook推出的一款单元测试工具. 安装 npm install --save-dev jest ts-jest @types/jest 在package.json中添加脚本: “te ...
随机推荐
- Django ORM查询结果是model对象
xxx.object.get/filter()要查询出的结果为model对象,并不是需要的数据,如果使用需要model_to_dict()函数.
- Bootstrap Blazor 组件库
项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应 ...
- python数据库MySQL之视图,触发器,事务,存储过程,函数
一 视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,可以将该结果集当做表来使用. 使用视图我们可以把查询过程中的 ...
- js函数基础回顾
回头又跑去看了下尚硅谷的js基础视频 https://www.bilibili.com/video/av22958172/?p=51. 便做了如下笔记: 1.函数也是一个对象 2.函数可以封装一些功能 ...
- C/C++知识总结 一 C/C++常识概述
C/C++常识概述 程序与计算机语言 C/C++简介与发展 C/C++异同 C/C++编译特点 学习编程建议 程序与计算机语言 程序:是一组计算机能识别和执行.预先编好的一些指令操作合集. 计算机语言 ...
- Martinjingyu的开发环境
Mac Pro Book一台去年新款,最近这4年多折腾的东西总结下. Mac的包管理器首选HomeBrew,安装如下: ruby -e "$(curl -fsSL https://raw.g ...
- Python设计模式(5)-代理模式
# coding=utf-8 # 代理模式:# * 代理类成为实际想调用对象的中间件,可以控制对实际调用对象的访问权限# * 可以维护实际对象的引用 class DbManager: def __in ...
- lr使用soap协议,来对webservice接口进行测试
实际项目中基于WSDL来测试WebService的情况并不多,WSDL并不是WebService测试的最佳选择. 最主要的原因还是因为WSDL文档过于复杂. 在案例(天气预报WebService服务) ...
- lr自带协议工具
Lr自带的协议分析的工具: 录制脚本之前,选对协议很关键,否则错误的协议会导致Virtual User Generator 录制不到脚本,或录制的脚本不完整,有些应用可能需要选择多个协议才能完整的记录 ...
- CVE-2020-1938:Apache-Tomcat-Ajp漏洞-复现
0x00 漏洞简介 Apache与Tomcat都是Apache开源组织开发的用于处理HTTP服务的项目,两者都是免费的,都可以做为独立的Web服务器运行. Apache Tomcat服务器存在文件包含 ...