文章目录
前言
单元测试的执行通常需要测试规范、断言、mock、覆盖率工具等支持， Jest 是用来创建、执行和构建测试用例的 JavaScript 测试库，自身包含了 驱动、断言库、mock 、代码覆盖率等多种功能，配置使用相当简单，十分推荐。
一、安装
进入项目的目录，输入下面的命令将jest安装到当前项目
npminstall jest --save-dev
安装完成之后会出现以下的文件
package.json 文件
{"devDependencies":{"jest":"^29.7.0"}}
二、初体验
1.新建一个 js 文件和 test 文件
在 js 文件中写一个我们想测试的函数
functionadd(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 来模拟浏览器环境，进而来测试
输入命令来安装
npminstall --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 代码
functionadd(a, b){
document.getElementById("sum").innerHTML = a + b;}
module.exports ={
add
}
这时候如果直接像之前那样运行 jest 就会报错
2.jsdom 添加
我们需要在 test 文件中引入 jsdom，并且模拟一个环境进行测试，这是测试函数也与上面的有所差异了，test文件代码如下
const{JSDOM}=require('jsdom');const jsDomIntance =newJSDOM(`
<!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 文件中再添加一个函数
functionadd(a, b){
document.getElementById("sum").innerHTML = a + b;}functionsub(a, b){return a - b;}
module.exports ={
add
}
再进行覆盖率测试，就会是下面的结果
最后
使用 jest 进行单元测试就先写这么多吧，希望对你有帮助，欢迎评论，拜拜！
版权归原作者 fiv· 所有， 如有侵权，请联系我们删除。