前端自动化测试框架Jest介绍和使用

在实际项目的自动化测试过程中，如果只有这两个方法，很显然，是远远不够的，这时候，就需要我们对之前的方法进行扩充，同时还有很多自动化的机制需要集成进去。这时候 Jest 闪亮登场！

Jest 框架介绍

一个优秀的自动化测试框架，在以下三个方面应该比较突出：

• 性能好
• 功能齐全
• 易用性很好

Jest 在这三个方面做的非常好（当然了，像Jasmine、mocha这些主流前端测试框架做的也不错）。

这些主流前端测试框架使用的方法、原理上都差不多，实际上，我们学会了一个，另外几个也就很容易的继续学习了，所以这篇文章只讲解 Jest。

那么 Jest 具体好用在哪些方面呢？

答案是这些：

• 速度快（可以自动监测修改过的代码，不会重复测试）

• API 简单、数量少

• 易配置

• 隔离性好

• 监控模式

• IDE 整合（比如vs code）

• Snapshot（快照测试）

• 多项目并行

• 覆盖率

• Mock 丰富

• 对新技术支持度好

使用Jest修改自动化测试样例

在上面的部分，我们自己写了一些测试代码对 Math 库进行了测试，现在我们要使用 Jest 对 Math 进行重新测试。

首先打开编辑器，进入到控制台（为了避免不必要的麻烦，建议大家跟我一样使用vs code）。

第1步：初始化npm环境

npm init

在执行命令的时候会遇到一些选项或者问题，无脑按回车即可，如果看到目录下出现了一个 package.json 文件，那么这就是一个标准的 npm 包了。

第2步：安装依赖

npm install jest -D

注：-D 是 --save -dev 的缩写。

如果看到 Jest 出现在了 package.json 文件中，并且目录中出现了 node_modules 文件夹，就说明安装成功了。

第3步：修改之前的代码

首先删除之前写的 test 方法 和 expect 方法 的实现过程，因为 Jest 自带了这两个方法，我们不需要手动实现。然后采用模块化的标准，将 math.js 中的方法导出：

// math.js

function add(a, b) {
  return a + b;
}

function minus(a, b) {
  return a - b;
}

function multi(a, b) {
  return a * b;
}

module.exports = { add, minus, multi };

然后在 math.test.js 文件中引入这几个方法：

// math.test.js

const { add, minus, multi } = require("./math");

test("测试加法 3 + 3", () => {
  expect(add(3, 3)).toBe(6);
});

test("测试减法 3 - 3", () => {
  expect(minus(3, 3)).toBe(0);
});

test("测试乘法 3 * 3", () => {
  expect(multi(3, 3)).toBe(9);
});

第4步：配置 package.json 文件

将如下代码添加到 package.json 中：

"scripts": {
  "test": "jest"
},

第5步：执行测试代码

完成配置之后，运行 yarn test 或者 npm run test ，控制台将输出如下信息：

假设这个时候，我们把第三个测试用例的结果改成错误值：

// math.test.js

const { add, minus, multi } = require("./math");

test("测试加法 3 + 3", () => {
  expect(add(3, 3)).toBe(6);
});

test("测试减法 3 - 3", () => {
  expect(minus(3, 3)).toBe(0);
});

test("测试乘法 3 * 3", () => {
  expect(multi(3, 3)).toBe(10); // 错误的结果
});

重新运行 yarn test 或者 npm run test，可以看到如下结果：

可以看到，控制台报出了错误：乘法测试没有通过，期待值（Expected）是10，但是返回值是（Received）9。

然后我们再把测试结果改成正确的值，重新执行命令行，就能得到正确的测试结果了。

这个时候，说明Jest 这个框架已经被我们正确的使用了。