EnlightenCode

Jest实践指南 ​

原文地址：Jest实践指南

创建项目 ​

React18版本冲突问题 ​

js
npm i -D jest@27.5.1

npx jest --init // 初始化jest.config.js

解决jest默认不支持import的问题 ​

js
npm install --save-dev babel-jest @babel/core @babel/preset-env babel-plugin-transform-es2015-modules-commonjs

目录结构 ​

js
├── jest.config.js
├── package-lock.json
├── package.json
├── src
│   └── utils
│       └── sum.js
└── tests
    └── utils
        └── sum.test.js

第一个测试文件 ​

添加一个工具函数文件 src/utils/sum.js 作为我们第一个业务文件：

js
// src/utils/sum.js
const sum = (a, b) => {
  return a + b;
}

export default sum;

添加我们项目的第一个测试用例 tests/utils/sum.test.js：

js
// tests/utils/sum.test.js
import sum from '../../src/utils/sum';

describe('sum', () => {
  it('可以做加法', () => {
    expect(sum(1, 1)).toEqual(2);
  });
})

启动测试：

js
npm run test
npm run test <文件的相对路径> // 运行某个文件

覆盖率报告 ​

上面终端里展示的就是覆盖率情况，只不过以终端的形式展示。现在我们打开根目录下的 coverage 目录，会发现生成很多覆盖率文件：

js
├── clover.xml             # Clover XML 格式的覆盖率报告
├── coverage-final.json    # JSON 格式的覆盖率报告
├── lcov-report            # HTML 格式的覆盖率报告
│   ├── base.css
│   ├── block-navigation.js
│   ├── favicon.png
│   ├── index.html         # 覆盖率根文件
│   ├── prettify.css
│   ├── prettify.js
│   ├── sort-arrow-sprite.png
│   ├── sorter.js
│   └── sum.js.html        # sum.js 的覆盖率情况
└── lcov.info