前端自动化测试框架Jest的简单配置

lsekfe

在之前的文章中，我们实现了 expect 方法 和 test 方法，介绍了 Jest 的基础使用，今天我们来说说 Jest 的简单配置。
　　Jest 和 Webpack 一样都有默认配置，我们可以运行 npx jest --init 命令来初始化默认配置。在运行命令行的时候，会弹出一些选项，比如：
　　·是否需要开启typescript
　　· 是否需要生成覆盖率报告
　　· 选择node 环境或者浏览器环境
　　· 在测试完成之后，是否需要进行一些清除工作
　　……
　　这些选项可以根据自己的实际情况进行选择是或者否。

当全部选择完成之后，可以看到在目录中多了一个 jest.config.js 文件，这时候就说明初始化配置完成了。

　　代码测试覆盖率
　　当我们在控制台中输入npx jest --coverage时，控制台会打印出以下信息：

这是一个关于测试覆盖率的说明，这是一个图表信息，它告诉我们所有的文件都被100%的测试到了。
　　如果觉得执行npx jest --coverage命令太麻烦，你也可以将如下代码添加到 package.json 中：

1. "scripts": {
   
2.   "test": "jest",
   
3.   "coverage": "jest --coverage"
   
4. },

复制代码

　然后可以执行npm run coverage，和执行npx jest --coverage是一样的效果。
　　除了控制台可以看到图表信息之外，你还可以在当前目录下看到一个生成的coverage目录：

在里面有一个lcov-report文件夹，里面有一个index.html，我们打开它会看到：

可以看到，这是一个通过Jest生成的非常漂亮的html页面，上面会告诉我们，我们的每一个文件的测试到底覆盖了多少代码。可以看到，math.js 中的代码都被100%覆盖到了。
　　通过这个例子，我们就理解了code coverage（代码覆盖率）的意思了。
　　总结来说：测试覆盖率就是我们编写的测试代码对原来的功能代码的占比。
　　tips: 配置文件中的coverageDirectory就是代码测试覆盖率生成报告所在的文件夹的名字：

1. module.exports = {
   
2.   coverageDirectory: "abc"
   
3. };

复制代码

　例如，我们让coverageDirectory的值为abc，那么生成的测试报告就在目录abc下面。

　　把commonjs改成es module
　　我们先把 math.js 和 math.test.js 中的代码改成 es module 的规范：

1. // math.js
   
2. 
   
3. export function add(a, b) {
   
4.   return a + b;
   
5. }
   
6. 
   
7. export function minus(a, b) {
   
8.   return a - b;
   
9. }
   
10. 
    
11. export function multi(a, b) {
    
12.   return a * b;
    
13. }

复制代码

1. // math.test.js
   
2. 
   
3. import { add, minus, multi } from "./math";
   
4. 
   
5. test("测试加法 3 + 3", () => {
   
6.   expect(add(3, 3)).toBe(6);
   
7. });
   
8. 
   
9. test("测试减法 3 - 3", () => {
   
10.   expect(minus(3, 3)).toBe(0);
    
11. });
    
12. 
    
13. test("测试乘法 3 * 3", () => {
    
14.   expect(multi(3, 3)).toBe(9);
    
15. });

复制代码

然后运行 npm run test，会发现控制台报错了。
　　要解决这个问题，需要用到 Babel 把代码进行转化就OK了，如果想让 Babel 支持 ESM，我们需要三个包：
　　·@babel/core：babel核心库
　　· @babel/preset-env：进行 ES 语法转换的库
　　· babel-jest：和 Jest 通信的库，用来检测是否安装了上面两个依赖
　　但是因为我们在安装 Jest 的时候 babel-jest 就默认被安装了，所以我们只需要安装剩下两个包就行了。
　　安装依赖：

1. npm install @babel/core @babel/preset-env -D

复制代码

　注：-D 是 --save -dev 的缩写。
　　安装完成之后，在项目的根目录下创建一个 .babelrc 配置文件：

创建完成之后，将如下代码添加到 .babelrc 中：

1. {
   
2.   "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
   
3. }

复制代码

保存之后，重新运行 npm run test，执行测试用例即可。