现代主流的前端框架测试配置

前端测试
, ,

测试驱动开发

TDD 的开发流程（从红到绿）

  1. 编写测试用例
  2. 运行测试，测试用例无法通过测试
  3. 编写代码，使测试用例通过测试
  4. 优化代码，完成开发
  5. ‘重复上述步骤

TDD 的优势

  • 长期减少回归 BUG
  • 代码质量（组织，可维护性）
  • 测试覆盖率（尽可能高，但不一定要追求到 100% 覆盖率）
  • 错误测试代码不容易出现

行为驱动开发

BDD 的流程（从描述到实现）

  1. 编写行为描述：使用自然语言编写用户故事或场景，描述系统行为和预期结果。
  2. 运行测试：用 BDD 框架运行这些场景，初始测试会失败。
  3. 实现代码：编写实现代码，使测试通过。
  4. 优化代码：重构代码，确保其符合需求和最佳实践。
  5. 重复上述步骤：为新的功能或场景继续编写描述、实现代码和优化。

BDD 的优势

  • 明确需求：通过自然语言描述，增强对业务需求的理解。
  • 提升沟通：开发人员、测试人员和业务人员可以用相同的语言讨论需求。
  • 文档化测试：场景描述作为自动化测试和需求文档的双重用途。
  • 鼓励用户中心：聚焦于用户需求和行为，提升软件质量和用户体验。

在 Vue 中配置 Jest

在 Vue Cli 中选择启用单元测试，Vue 会帮我们配置好 Jest 的配置。配置完后我们可以执行一下这个命令

1
npm run test:unit

image.png

这意味着 Vue 帮你配置的单测内容已经执行成功了。紧接着你可以写关于项目的单测内容了。

在 React 中配置 Jest

因为我目前主要的技术栈是 React ，所以 React 的配置 Jest 的篇幅就会也详细些。Vue 中配置 Jest 在掘金上已经有许多好文章了。如果你安装某些依赖报错了别担心，这很有可能因为本地网络环境问题，你可以试着给 npm 配置镜像，如阿里云、腾讯云、清华大学等等的 npm 镜像。亦或者使用 cnpm 。

创建一个 React 项目

1
$ npm create vite@latest

用 Vite 创建的项目没有帮我们配置 Jest 的。所以我们要手动安装 Jest 。

1
npm install --save-dev jest @types/jest @jest/types

初始化配置

1
npx jest --init

image.png

  • 会涉及到 DOM 的单测，所以要选 JSDOM
  • 覆盖率暂时用不上
  • 编译代码：Babel 可以将我们写的 ES6 以上的语法特性转换成 ES5，这样我们可以避免一些不必要的兼容性问题。
  • 我们希望每次测试完后都清理 mock 等结果。

配置完后可以打开 jest.config.ts 看看

image.png

因为选了 Babel 作为单测的编译，还需要增添配置。

1
npm install --save-dev babel-jest @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

创建 babel.config.js 并添加针对 Babel 的配置。

1
2
3
4
5
6
7
8
// ./babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    ["@babel/preset-react",{ runtime: "automatic" }], // 自动导入react
    "@babel/preset-typescript",
  ],
};

写一个简单的 Jest 例子，用于测试 Jest 是否可以正常运行。

然后执行

1
npm run test

因为配置文件用的是 TypeScript 所以要安装 ts-node 依赖。然后要安装 jest-environment-jsdom ，因为 Jest 不会帮我们集成进去。

1
npm install ts-node --save-dev
1
npm install jest-environment-jsdom --save-dev

因为 Vite 采用了 ESModule 的模块化，所以要将 babel.config 的后缀类型应该使用 cjs。这样 Jest 就能正常运行了。

Jest 的基础配置已经大功告成了。但是还有一些特殊情况，我们需要额外进行一些配置。

而外扩展名识别：据我所知 Jest 不用 Webpack 来构建需要让它知道如何载除 js/jsx 之外的文件扩展名。所以要添加一个转换器。帮助它识别。

1
"^.+.(js|ts|tsx)$": "./node_modules/babel-jest",
  • Svg mock 转换：项目可能会用到 SVG 等图片，Jest 也是无法识别的，我们需要对它进行 mock，返回相同的输出结果。
1
"^.+.svg$": "./svg-transform.js",
1
2
3
4
5
6
7
8
9
// ./svg-transform.js
export default {
  process() {
    return { code: "module.exports = {};" };
  },
  getCacheKey() {
    return "svgTransform"; // SVG固定返回这个字符串
  },
};
  • CSS 代理：Jest 本身不知道如何处理不同扩展的文件，我们可以通过配置代理的方式，告诉 Jest 将此对象模拟为导入的 CSS 模块。
1
npm install --save-dev identity-obj-proxy
1
2
3
4
5
6
// jest.config.ts
export default {
  // ... other config
  moduleNameMapper: {
    "\.(css|less)$": "identity-obj-proxy" // 有使用 sass 需求的同学可以把正则换成 ^\.(css|less|sass|scss)$
  }

恭喜做到这些，一个 Jest 的配置就算完了。