Jest 进行前端单元测试

fiv·

已于 2023-09-28 13:05:01 修改

阅读量1.5k

点赞数 2

文章标签：前端单元测试

于 2023-09-28 12:58:35 首次发布

本文链接：https://blog.csdn.net/WdbM_/article/details/133380305

版权

文章目录

前言
一、安装
二、初体验
三、jsdom 使用
四、覆盖率测试
最后

前言

单元测试的执行通常需要测试规范、断言、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 进行单元测试就先写这么多吧，希望对你有帮助，欢迎评论，拜拜！

fiv·

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
Jest 进行前端单元测试

Jest 是用来创建、执行和构建测试用例的 JavaScript 测试库，配置使用相当简单，十分推荐，文章对 Jest 进行了初步的使用
复制链接

扫一扫

Jest 进行前端单元测试

文章目录

前言

一、安装

二、初体验

1.新建一个 js 文件和 test 文件

2.在 webstorm 中可以进行单项测试

3.命令行测试

三、jsdom 使用

1.jsdom 安装

2.jsdom 使用

1.环境准备

2.jsdom 添加

四、覆盖率测试

最后

“相关推荐”对你有帮助么？