文章目录
前言
单元测试的执行通常需要测试规范、断言、mock、覆盖率工具等支持, Jest 是用来创建、执行和构建测试用例的 JavaScript 测试库,自身包含了 驱动、断言库、mock 、代码覆盖率等多种功能,配置使用相当简单,十分推荐。
一、安装
进入项目的目录,输入下面的命令将jest安装到当前项目
npm install jest --save-dev
安装完成之后会出现以下的文件
package.json 文件
{
"devDependencies": {
"jest": "^29.7.0"
}
}
二、初体验
1.新建一个 js 文件和 test 文件
在 js 文件中写一个我们想测试的函数
function add(a, b) {
return a + b;
}
module.exports = {
add
}
注意 exports,用 { } 可以比较方便导出多个函数
在 test 中写一个简单的测试
const {add} = require("./demo")
test("test add", () => {
expect(add(1, 2)).toBe(3);
})
2.在 webstorm 中可以进行单项测试
success
fail
3.命令行测试
首先需要在 package.json 中添加 scripts
{
"devDependencies": {
"jest": "^29.7.0"
},
"scripts": {
"test": "jest"
}
}
在项目目录下输入命令
npm run test
结果如下
jest 进行测试大概就这样
三、jsdom 使用
1.jsdom 安装
在 js 中经常会使用
document.querySelector('') .....
document.getElementById("") .....
在 js 中使用内置的 document 对象来访问 DOM
在用 jest 进行单元测试的时候该怎么解决这个问题呢?jest 提供了 jsdom 来模拟浏览器环境,进而来测试
输入命令来安装
npm install --save-dev jsdom
安装完成 package.json 中就会出现 jsdom 了
2.jsdom 使用
1.环境准备
首先实现一个简单的功能,一个简单的 button,点击之后计算 1 + 2 并在 sum 的位置显示结果
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="demo.js"></script>
</head>
<body>
<div>
<div id="sum">sum</div>
<button id="btn" onclick="add(1, 2)">Click me</button>
</div>
</body>
</html>
js 代码
function add(a, b) {
document.getElementById("sum").innerHTML = a + b;
}
module.exports = {
add
}
这时候如果直接像之前那样运行 jest 就会报错
2.jsdom 添加
我们需要在 test 文件中引入 jsdom,并且模拟一个环境进行测试,这是测试函数也与上面的有所差异了,test文件代码如下
const {JSDOM} = require('jsdom');
const jsDomIntance = new JSDOM(`
<!DOCTYPE html>
<body>
<div>
<div id="sum">sum</div>
<button id="btn" οnclick="add(1, 2)">Click me</button>
</div>
</body>
</html>
`)
const window = jsDomIntance.window; // window 对象
const document = window.document; // document 对象
global.document = document;
const {add} = require("./demo")
test("test add", () => {
add(1, 2)
expect(document.getElementById("sum").innerHTML).toBe("3");
})
可以看到其实就是 copy html 到 jsdom 中
再进行测试结果如下
四、覆盖率测试
jest 进行覆盖率测试其实特别简单,在 package.json 中添加一个命令就好
{
"devDependencies": {
"jest": "^29.7.0",
"jsdom": "^22.1.0"
},
"scripts": {
"test": "jest",
"coverage": "jest --coverage"
}
}
在命令行执行
npm run coverage
就可以得到结果了
这里只有一个函数并且测试了,当然就是 100%
如果在 js 文件中再添加一个函数
function add(a, b) {
document.getElementById("sum").innerHTML = a + b;
}
function sub(a, b) {
return a - b;
}
module.exports = {
add
}
再进行覆盖率测试,就会是下面的结果
最后
使用 jest 进行单元测试就先写这么多吧,希望对你有帮助,欢迎评论,拜拜!