使用Jest测试JavaScript
1 什么是 Jest?
Jest是 Facebook 的一套开源的 JavaScript 测试框架, 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具,是一款几乎零配置的测试框架。并且它对同样是 Facebook 的开源前端框架 React 的测试十分友好。
2 安装Jest
2.1 初始化package.json
在shell
中输入以下命令,初始化前端项目并生成package.json
:
npm init -y
- 1
- 2
2.2 安装Jest及相关依赖
在shell
中输入以下命令,安装测试所需要的依赖:
npm install -D jest babel-jest babel-core babel-preset-env regenerator-runtime
- 1
- 2
babel-jest
、 babel-core
、 regenerator-runtime
、babel-preset-env
这几个依赖是为了让我们可以使用ES6的语法特性进行单元测试,ES6提供的 import
来导入模块的方式,Jest本身是不支持的。
2.3 添加.babelrc
文件
在项目的根目录下添加.babelrc
文件,并在文件复制如下内容:
{
"presets": ["env"]
}
```
- 1
- 2
- 3
- 4
2.4 修改package.json
中的test
脚本
打开package.json
文件,将script
下的test
的值修改为jest
:
"scripts": {
"test": "jest"
}
- 1
- 2
- 3
- 4
3. 编写你的第一个Jest测试
创建src
和test
目录及相关文件
- 在项目根目录下创建
src
目录,并在src
目录下添加functions.js
文件 - 在项目根目录下创建
test
目录,并在test
目录下创建functions.test.js
文件
Jest会自动找到项目中所有使用.spec.js
或.test.js
文件命名的测试文件并执行,通常我们在编写测试文件时遵循的命名规范:测试文件的文件名 = 被测试模块名 + .test.js
,例如被测试模块为functions.js
,那么对应的测试文件命名为functions.test.js
。
在src/functions.js
中创建被测试的模块
export default {
sum(a, b) {
return a + b;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
在test/functions.test.js
文件中创建测试用例
import functions from '../src/functions';
test('sum(2 + 2) 等于 4', () => {
expect(functions.sum(2, 2)).toBe(4);
})
- 1
- 2
- 3
- 4
- 5
- 6
运行npm run test
, Jest会在shell
中打印出以下消息:
PASS test/functions.test.js
√ sum(2 + 2) 等于 4 (7ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.8s
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
4.常用的几个Jest断言
上面测试用例中的expect(functions.sum(2, 2)).toBe(4)
为一句断言,Jest为我们提供了expect
函数用来包装被测试的方法并返回一个对象,该对象中包含一系列的匹配器来让我们更方便的进行断言,上面的toBe
函数即为一个匹配器。我们来介绍几种常用的Jest断言,其中会涉及多个匹配器。
.not
//functions.test.js
import functions from '../src/functions'
test('sum(2, 2) 不等于 5', () => {
expect(functions.sum(2, 2)).not.toBe(5);
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
.not
修饰符允许你测试结果不等于某个值的情况,这和英语的语法几乎完全一样,很好理解。
.toEqual()
// functions.js
export default {
getAuthor() {
return {
name: 'LITANGHUI',
age: 24,
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
// functions.test.js
import functions from '../src/functions';
test('getAuthor()返回的对象深度相等', () => {
expect(functions.getAuthor()).toEqual(functions.getAuthor());
})
test('getAuthor()返回的对象内存地址不同', () => {
expect(functions.getAuthor()).not.toBe(functions.getAuthor());
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
.toEqual
匹配器会递归的检查对象所有属性和属性值是否相等,所以如果要进行应用类型的比较时,请使用.toEqual
匹配器而不是.toBe
。
.toHaveLength
// functions.js
export default {
getIntArray(num) {
if (!Number.isInteger(num)) {
throw Error('"getIntArray"只接受整数类型的参数');
}
let result = [];
for (let i = 0, len = num; i < len; i++) {
result.push(i);
}
return result;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
// functions.test.js
import functions from '../src/functions';
test('getIntArray(3)返回的数组长度应该为3', () => {
expect(functions.getIntArray(3)).toHaveLength(3);
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
.toHaveLength
可以很方便的用来测试字符串和数组类型的长度是否满足预期。
.toThrow
// functions.test.js
import functions from '../src/functions';
test('getIntArray(3.3)应该抛出错误', () => {
function getIntArrayWrapFn() {
functions.getIntArray(3.3);
}
expect(getIntArrayWrapFn).toThrow('"getIntArray"只接受整数类型的参数');
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
.toThorw
可能够让我们测试被测试方法是否按照预期抛出异常,但是在使用时需要注意的是:我们必须使用一个函数将将被测试的函数做一个包装,正如上面getIntArrayWrapFn
所做的那样,否则会因为函数抛出导致该断言失败。
.toMatch
// functions.test.js
import functions from '../src/functions';
test('getAuthor().name应该包含"li"这个姓氏', () => {
expect(functions.getAuthor().name).toMatch(/li/i);
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
.toMatch
传入一个正则表达式,它允许我们用来进行字符串类型的正则匹配。
5 测试异步函数
安装axios
这里我们使用最常用的http请求库axios
来进行请求处理
npm install axios
- 1
- 2
编写http请求函数
我们将请求http://jsonplaceholder.typicode.com/users/1
,这是由JSONPlaceholder提供的mock请求地址
// functions.js
import axios from 'axios';
export default {
fetchUser() {
return axios.get('http://jsonplaceholder.typicode.com/users/1')
.then(res => res.data)
.catch(error => console.log(error));
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
// functions.test.js
import functions from '../src/functions';
test('fetchUser() 可以请求到一个含有name属性值为Leanne Graham的对象', () => {
expect.assertions(1);
return functions.fetchUser()
.then(data => {
expect(data.name).toBe('Leanne Graham');
});
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
上面我们调用了expect.assertions(1)
,它能确保在异步的测试用例中,有一个断言会在回调函数中被执行。这在进行异步代码的测试中十分有效。
使用async
和await
精简异步代码
test('fetchUser() 可以请求到一个用户名字为Leanne Graham', async () => {
expect.assertions(1);
const data = await functions.fetchUser();
expect(data.name).toBe('Leanne Graham')
})
- 1
- 2
- 3
- 4
- 5
- 6
当然我们既然安装了Babel
,为何不使用async
和await
的语法来精简我们的异步测试代码呢? 但是别忘记都需要调用expect.assertions
方法
参考资料
【1】 Jest官方文档(https://jestjs.io/zh-Hans/)
【2】 Jest Crash Course - Unit Testing in JavaScript https://www.youtube.com/watch?v=7r4xVDI2vho)
来源:https://segmentfault.com/a/1190000016232248
原文地址:https://www.cnblogs.com/hanzeng1993/p/11647603.html
- SQL Server基础SQL脚本之内外连接、交叉连接;函数、子查询
- MySQL 面试选择题15道(单选)
- SQL Server基础SQL脚本之分区表、分区方案
- SQL Server基础SQL脚本之创建架构、排序
- 枚举算法(Enumeration algorithm)实例一
- 剑指offer代码解析——面试题16反转单链表
- QMainWindow 和 QWidget 设置layout
- 安全工具Aircrack-ng的使用
- Windows Server 2008 R2 搭建微信小程序
- insert事务产生duplicate key error引发的死锁分析
- 零基础入门深度学习 | 第六章:长短时记忆网络(LSTM)
- 第6章 I/O复用:select和poll函数
- 第7章 套接字选项
- 第8章 基本UDP套接字编程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PyCharm 下 Turtle无提示有警告
- JSP 中 out.print() 和 out.write() 区别
- IDEA 导入web项目
- IDEA 连接数据库
- 图解面试题:如何找到破产玩家?
- python面向对象学习(一)
- playbook中when的使用
- 当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)
- 你想要的Android性能优化系列:内存优化 !
- phabricator介绍与搭建
- nginx反向代理与负载均衡
- APP | edxposed框架+trustmealredy模块抓包小程序
- nginx动态添加模块
- 曾经豪言“指哪爬哪”,如今被一个JS狠狠教做人
- mysql主从复制延迟问题记录