起步

首先，我们来创建一个新项目。

::: warning 阅读中遇到卡壳时，可以参考 配套项目 。 :::

创建项目

使用 npm 初始化，并安装 jest。

  1. # 创建项目
  2. mkdir jest-starter
  3. cd jest-starter
  5. # 初始化
  6. npm init -y
  8. # 安装依赖
  9. npm i -D jest@27.5.1

::: warning 目前 Jest 已经来到 28 版本了，但是我在实践中发现 Jest@28 和 react@18 以及 @testing-library/react 一起使用时会有冲突，建议大家跟着我使用 稳定 的版本。 :::

安装 Jest 后，用 jest-cli 初始化 jest 配置文件：

  1. npx jest --init

初始化配置文件时，Jest 会问你一堆问题，可以先按我下面的图来选择（只打开覆盖率和自动清除 Mock），别的以后再说：

起步 - 图1

执行完之后，就会看到有一个 jest.config.js 的配置文件：

  1. // jest.config.js
  2. module.exports = {
  3.   // 自动清除 Mock
  4.   clearMocks: true,
  6.   // 开启覆盖率
  7.   collectCoverage: true,
  9.   // 指定生成覆盖率报告文件存放位置
  10.   coverageDirectory: "coverage",
  12.   // 不用管
  13.   coverageProvider: "v8",
  14. };

::: tip 建议不要犯了强迫症把 jest.config.js 的注释去掉，它们可以作为配置 Jest 的简单版文档。 :::

第一个测试

有了基本配置后，添加一个工具函数文件 src/utils/sum.js 作为我们第一个业务文件：

  1. // src/utils/sum.js
  2. const sum = (a, b) => {
  3.   return a + b;
  4. }
  6. module.exports = sum;

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

  1. // tests/utils/sum.test.js
  2. const sum = require("../../src/utils/sum");
  4. describe('sum', () => {
  5.   it('可以做加法', () => {
  6.     expect(sum(1, 1)).toEqual(2);
  7.   });
  8. })

项目结构如下：

  1. ├── jest.config.js
  2. ├── package-lock.json
  3. ├── package.json
  4. ├── src
  5. │   └── utils
  6. │       └── sum.js
  7. └── tests
  8.     └── utils
  9.         └── sum.test.js

执行测试

一切就绪，执行以下命令启动测试：

  1. # npx jest
  2. npm run test

执行结果如下：

起步 - 图2

🎉 成功 🎉

覆盖率报告

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

  1. ├── clover.xml             # Clover XML 格式的覆盖率报告
  2. ├── coverage-final.json    # JSON 格式的覆盖率报告
  3. ├── lcov-report            # HTML 格式的覆盖率报告
  4. │   ├── base.css
  5. │   ├── block-navigation.js
  6. │   ├── favicon.png
  7. │   ├── index.html         # 覆盖率根文件
  8. │   ├── prettify.css
  9. │   ├── prettify.js
  10. │   ├── sort-arrow-sprite.png
  11. │   ├── sorter.js
  12. │   └── sum.js.html        # sum.js 的覆盖率情况
  13. └── lcov.info

Jest 会在 coverage 目录下生成各种不同格式的覆盖率报告文件，有 XML，JSON，也有 HTML 的。生成这么多不同格式的测试报告只只是为了方便不同工具的读取， 比如 JS 读 JSON 就比读 XML 容易，它们描述的内容都是一样的。

无论哪种格式，我们都很难直观地看懂。因此，Jest 也支持生成网页的测试报告，打开 lcov-report/index.html 就可以看到网页版的测试报告了：

起步 - 图3

总结

这一章里，我们创建了新项目，并成功编写并测试了第一个测试用例。

然而，这只是开始，后面还有很多问题等着我们解决，马上去看下一章吧。