Jest 作为单元测试框架提供整个测试环境，包括except，assert语法，mock模块，代码覆盖率的能力。

1. 安装

yarn add --dev jest //yarn 
npm install --save-dev jest //npm

安装之后，根目录下运行 jest test，就会开始跑单元测试，默认会匹配以下路劲的文件[**/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x)]。通常情况下会将单元测试文件放到__test__目录下。

2. 生成基础配置文件

Jest通过命令行的方式生成一个配置文件jest.config.js，用来控制Jest的行为。

jest --init

执行该命令时会问以下几个问题:

常用配置

module.exports = {

 //是否将导入的模块自动mock，通常不要，因为有些mock逻辑是你可能想自定义
  automock: false,

  //是否在每次测试都清楚mock, 通常选true
  clearMocks: true,

//哪些文件要收集单测报告，通常根据文件自定义
  collectCoverageFrom: ['src/components/**/*.{js,jsx,ts,tsx}', 'src/hooks/**/*.{js,jsx,ts,tsx}', 'src/utils/**/*.{js,jsx,ts,tsx}'],

 //覆盖率报告的文件名称，默认coverage就好
  coverageDirectory: "coverage",
};

更多配置查看：https://jestjs.io/zh-Hans/docs/configuration
查看更多命令，执行jest help

3. 添加测试相关命令

package.json 中 script添加单元测试相关命令

"script": {
    "test": "jest test --coverage", 
    "test:update": "jest test --updateSnapshot",
    "test:watch": "jest test  --watch",
     "test:verbose": "jest test  --verbose",
}

注：无cross-env

"script": {
    "test": "cross-env BABEL_ENV=test jest --coverage",
    "test:update": "cross-env BABEL_ENV=test jest --updateSnapshot",
    "test:watch": "cross-env BABEL_ENV=test jest  --watch"
    "test:verbose": "cross-env BABEL_ENV=test jest  --verbose"
}

注：前提安装了cross-env
--coverage 执行之后可以在命令行中生成覆盖率报告以及在根目录下生成coverage文件。

屏幕快照 2021-08-06 上午11.33.46.png

屏幕快照 2021-08-06 下午2.14.01.png

屏幕快照 2022-03-17 下午2.27.15.png

更多的命令查看：https://jestjs.io/zh-Hans/docs/cli

4.使用Babel

需要测试ECMAScript2015+ 的代码，需要安装@babel/preset-env

yarn add --dev babel-jest @babel/core @babel/preset-env //yarn
npm install --save-dev babel-jest @babel/core @babel/preset-env  //npm

在工程的根目录下创建一个babel.config.js文件用于配置与你当前Node版本兼容的Babel

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

5. 一些基本用法

1. 基本概念
   describe(name, fn)
   describe块称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（"加法函数的测试"），第二个参数是一个实际执行的函数。
   test(name, fn, timeout)
   其别名为(name, fn, timeout)。test块称为"测试用例"（test case），表示一个单独的测试，是测试的最小单位。它也是一个函数，第一个参数是测试用例的名称（"1 加 1 应该等于 2"），第二个参数是一个实际执行的函数。

//跳过该测试用例
test.skip(name, fn)
//该测试用例标记为将要做的
test.todo(name, fn)
//只运行该测试用例
test.only(name, fn)

//__test__/sum.js
const sum = (a, b) => {
    return a+b
}
export default sum

//sum.test.js
import sum from '../sum'
describe('加法函数的测试', () => {
  test('1 加 1 应该等于 2', () => {
    expect(sum(1,1)).toBe(2);
  });

  test('1+1不等于3', () => {
    expect(sum(1,1)).not.toBe(3);
  });
});

2. 钩子函数

beforeEach(fn, timeout)//每个测试用例执行前执行
afterEach(fn, timeout)//每个测试用例执行后执行
beforeAll(fn, timeout)//所有测试用例测试之前执行
afterAll(fn, timeout)//所有测试用例测试之后执行

更多全局函数参考：https://jestjs.io/zh-Hans/docs/api

3. 断言
   expect函数+ matcher函数断言
   3.1 expect函数

expect(value) //后边可以跟匹配器
expect.anything() //匹配除了null和undefined的所有，可以检查是否使用非空参数调用模拟函数
expect.any(constructor) //匹配任何构造器
expect.objectContaining(object)
expect.not.objectContaining(object)
expect.arrayContaining(array) //匹配一个数组包含
expect.not.arrayContaining(array)
expect.stringContaining(string)
expect.not.stringContaining(string)
expect.extend(matchers) //自定义匹配器，想要了解jest匹配器实现的可以看这一部分
expect.assertions(number) //验证断言次数
expect.hasAssertions() //验证至少有一个断言

注：按日常使用频率排序
expect.any-expect.not.stringContaining 这几个通常搭配toBeCalledWith一起使用

//objectContaining常可以用来校验函数的入参
test('onPress gets called with the right thing', () => {
  const onPress = jest.fn();
  simulatePresses(onPress);
  expect(onPress).toBeCalledWith(
    expect.objectContaining({
      x: expect.any(Number),
      y: expect.any(Number),
    }),
  );
});

3.2 常用匹配器(Matcher)

toBe(value)//匹配确定值
toContain(item)//匹配数组的某一个
toEqual(value) //深度匹配
toHaveLength(number)//匹配长度
 
toBeCalled() //匹配函数被调用
toHaveBeenCalledTimes(number) //匹配函数调用次数
toHaveBeenCalledWith(arg1, arg2, ...)//匹配函数调用的参数
toHaveBeenLastCalledWith(arg1, arg2, ...)//匹配最后一次调用的返回值
 
toBeFalsy()//匹配假
toBeTruthy()//匹配真
toBeNull()//匹配空
toBeUndefined()//匹配Undefined

toThrow(error?) //匹配错误

toBeGreaterThan(number | bigint) //匹配大于
toBeGreaterThanOrEqual(number | bigint) //匹配大于等于
toBeLessThan(number | bigint) //匹配小于
toBeLessThanOrEqual(number | bigint) //匹配小于等于
 
toMatchSnapshot(propertyMatchers?, hint?) 生成快照文件，
toMatchInlineSnapshot(propertyMatchers?, inlineSnapshot) 行内匹配快照
 
not //取反

更多断言查阅：https://jestjs.io/zh-Hans/docs/expect
关于快照的使用，可以查看：https://jestjs.io/zh-Hans/docs/snapshot-testing

4. mock函数
   函数和模块是我们项目中重要的组成部分，在我们对一个函数或模块的测试时，可能依赖其他的函数和模块，为了避免干扰，我们需要把影响我们测试的其它变成变成固定不变的，因此需要mock。

//mock一个函数
jest.fn()
 
const mockFn = jest.fn()
mockFn.mockClear()//清除mock
mockFn.mockImplementation(fn) //mock函数实现
mockFn.mockImplementationOnce(fn)
mockFn.mockReturnValue(value)//mock返回值
mockFn.mockReturnValueOnce(value)
mockFn.mockResolvedValue(value) //mock异步函数Resolved时返回值
mockFn.mockResolvedValueOnce(value)
mockFn.mockRejectedValue(value) //mock异步函数Rejected时返回值
mockFn.mockRejectedValueOnce(value)
 
#mock 模块
jest.mock(...) //模块路径

更多：https://jestjs.io/zh-Hans/docs/mock-function-api
关于异步的测试，查看：https://jestjs.io/zh-Hans/docs/tutorial-async

5. mock定时器
   如果被测试的文件包含定时器的功能，我们总不能等待指定的之间之后再去执行一些东西，因此我们需要对定时器相关的东西做些操作，已加快执行，消除等待时间。

jest.useFakeTimers() //使用mock的定时器，通常在beforeEach中调用
jest.useRealTimers() //使用真实的定时器，通常在afterEach中调用
jest.runAllTimers() //运行所有的定时器，加速定时器的运行
jest.clearAllTimers() //清除当前所有挂载的定时器
jest.runOnlyPendingTimers() //执行当前挂载的定时器
jest.advanceTimersByTime(ms) //提前XXms执行定时器

更多例子查看：https://jestjs.io/zh-Hans/docs/timer-mocks

好啦，Jest的基本知识到这里就结束了，如果想要了解更多的知识，还是需要去查Jest官网，亦或者想更深入得了解，则是去查看源码。如果不涉及DOM的操作，那么单元测试的基本东西可以到此结束，但是前端通常都是需要和DOM打交道的，接下来来就来讲讲怎样测试DOM， react-testing-library和enzyme究竟怎么选。