526互联

Jest快速使用指南

发布时间 2023-04-27 19:57:05作者: 当时明月在曾照彩云归

1. 引言

写了几个函数，怎么知道写得对不对呢？

可以通过测试函数，当然开发中测试的意义不只是这个

Jest是常用的JavaScript测试框架

官网为：Jest · ? Delightful JavaScript Testing (jestjs.io)

GitHub站点为：jestjs/jest: Delightful JavaScript Testing. (github.com)

本文描述快速使用Jest进行代码测试

2. 环境准备

安装：

npm install --save-dev jest

配置：

在项目的 package.json中添加测试命令：

{
  // ...
  "scripts": {
     // ...
    "test": "jest"
  }
}

?，配置完毕，不妨测试一下

新建一个JS文件并编写一个函数（sum.js）：

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

module.exports = sum;

新建一个JS测试文件并编写测试函数（sum.test.js）：

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

在console中执行命令npm run test：

npm run test

> test
> jest

 PASS  ./sum.test.js
  √ adds 1 + 2 to equal 3 (5 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.615 s, estimated 1 s
Ran all test suites.

测试成功

更详细的描述可以参考官方的Quick Start：快速开始 · Jest (jestjs.io)

默认的配置如果不满足使用（如，需使用ES6语法、TypeScript等），需要进行配置

下面进行配置babel以实现ES6语法支持和TypeScript支持：

安装：

npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-typescript ts-jest @types/jest

配置：

项目根目录下新建babel.config.js并写入配置：

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

这些配置参数均来自官方文档，使用时直接查阅即可

更为详细的配置项参考：快速开始 · Jest (jestjs.io)

3. 常用语法

3.1 常用匹配器

匹配器（matchers）就是将预期结果与测试结果比对，检测是否一致（匹配）

常用的匹配器有：

  • toBe
  • toEqual
  • toBeCloseTo
  • toMatch
  • toContain
  • toThrow 等

见字识义，根据函数名就可以推知其使用方法，如判断字符串匹配使用 toMatch 、判断数组是否包含使用toContain：

test('字符串匹配', () => {
  expect('team').toMatch('team');
});
// 测试通过

test('数组是否包含', () => {
  expect(['a', 'b', 'c']).toContain('b');
});
// 测试通过

匹配器更为具体的使用方法参考：Expect 断言 · Jest (jestjs.io)

3.2 异步函数

测试异步函数，可以使用Promise.then()，也可以使用await\async

function fetchData(callback) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('异步函数返回值');
    }, 1000);
  });
}

test('异步函数', () => {
  return fetchData().then(data => {
    expect(data).toBe('异步函数返回值');
  });
});
// 测试通过

test('异步函数2', async () => {
    const data = await fetchData();
    expect(data).toBe('异步函数返回值');
  }
);
// 测试通过

异步函数更为具体的使用方法参考：测试异步代码 · Jest (jestjs.io)

3.3 Hooks

Hooks可以理解为在一定时间触发的函数，比如测试函数执行前，测试函数执行后，常见的有：

  • beforeEach
  • afterEach
  • beforeAll
  • afterAll 等

见字识义，根据函数名就可以推知其使用方法，如在每个测试函数前触发的函数就是beforeEach：

let a = null;
beforeEach(() => {
  a = 1;
});

test('beforeEach', () => {
  expect(a).toBe(1);
});
// 测试通过

Hooks更为具体的使用方法参考：安装和移除 · Jest (jestjs.io)

3.4 Mock

Mock即模拟，比如开发时后端没有提供数据，这时候难以测试接口函数，就可以使用Mock

下面主要模拟axios模块，并将axios.get()返回值设置为自定义的

import axios from 'axios';

function getUsers() {
  return axios.get('/users.json').then(resp => resp.data);
}

jest.mock('axios');

test('should fetch users', () => {
  const users = [{name: 'Bob'}];
  const resp = {data: users};
  axios.get.mockResolvedValue(resp)

  return getUsers().then(data => expect(data).toEqual(users));
});

Mock更为具体的使用方法参考：模拟函数 · Jest (jestjs.io)

4. 参考资料

[1] 快速开始 · Jest (jestjs.io)

[2] jestjs/jest: Delightful JavaScript Testing. (github.com)