Node.js：Jest测试框架

Jest 是一个令人愉快的 JavaScript 测试框架，专注于 简洁明快。

• 官网 https://jestjs.io/
• 中文文档 https://jestjs.io/zh-Hans/
• 国内镜像：https://www.jestjs.cn/
• github: https://github.com/facebook/jest
• npmjs https://www.npmjs.com/package/jest

VS Code插件

Jest

// 如果不想自动运行，可以设置关闭
"jest.autoRun": "off"
1
2

安装jest

$ pnpm i -D jest
1

基本使用-Node.js

目录结构

$ tree -I node_modules
.
├── package.json
├── pnpm-lock.yaml
├── sum.js
└── sum.test.js
1
2
3
4
5
6

依赖 package.json

{
    "devDependencies": {
        "jest": "^29.3.1"
    }
}

1
2
3
4
5
6

功能函数 sum.js

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

module.exports = sum;
1
2
3
4
5

测试函数 sum.test.js

const sum = require("./sum.js");

test("1 + 2 = 3", function () {
  expect(sum(1, 2)).toBe(3);
});
1
2
3
4
5

运行测试

$ npx jest
 PASS  ./sum.test.js
  ✓ 1 + 2 = 3 (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.57 s
Ran all test suites.
1
2
3
4
5
6
7
8
9

匹配器

// 精确匹配
expect(1).toBe(1);

// 不相等匹配
expect(1).not.toBe(1);

// 递归检查对象或数组的每个字段
expect([1, 2, 3]).toEqual([1, 2, 3]);
1
2
3
4
5
6
7
8

测试函数调用情况

map.js

function map(list, callback) {
  return list.map(callback);
}

module.exports = map;

1
2
3
4
5
6

map.test.js

const map = require("./map.js");

// 定义分组
describe("测试map函数", () => {
  test("测试回调函数调用次数", function () {
    const fn = jest.fn((x) => x * 2);

    map([1, 2, 3], fn);

    // 测试回调函数调用次数
    expect(fn.mock.calls.length).toEqual(3);
  });

  test("测试回调函数返回值", function () {
    const fn = jest.fn((x) => x * 2);

    map([1, 2, 3], fn);

    expect(fn.mock.results[0].value).toEqual(2);
    expect(fn.mock.results[1].value).toEqual(4);
    expect(fn.mock.results[2].value).toEqual(6);
  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

查看测试覆盖率

$ npx jest --coverage
 PASS  ./map.test.js
  测试map函数
    ✓ 测试回调函数调用次数 (2 ms)
    ✓ 测试回调函数返回值 (1 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 map.js   |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.757 s, estimated 1 s
Ran all test suites.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

目录coverage/lcov-report 下会生成一个网页版的覆盖率报告

基本使用-ES6

安装依赖

npm install -D jest babel-jest babel-core babel-preset-env regenerator-runtime
1

高版本

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

备注：安装babel 为了让jest 支持ES6语法 import/export

package.json

{
  "type": "module",
  "scripts": {
    "test": "jest --verbose"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-jest": "^28.1.3",
    "babel-preset-env": "^1.7.0",
    "jest": "^28.1.3",
    "regenerator-runtime": "^0.13.9"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

babel 配置文件 .babelrc

babel-preset-env

{
  "presets": ["env"]
}
1
2
3

@babel/preset-env

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14

测试示例

src/functions.js

export default {
  sum(a, b) {
    return a + b
  },
}
1
2
3
4
5

tests/functions.test.js

import functions from '../src/functions'

test('sum(2 + 2) 等于 4', () => {
  expect(functions.sum(2, 2)).toBe(4)
})

1
2
3
4
5
6

运行测试

$ npx jest
 PASS  tests/functions.test.js
  ✓ sum(2 + 2) 等于 4 (1 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.141 s
Ran all test suites.
1
2
3
4
5
6
7
8
9

参考
使用Jest测试JavaScript (入门篇)
js：jest报错RangeError: Maximum call stack size exceeded
【Bilibili视频】JS 测试：Jest 框架入门教程