前端测试jest之入门概念

一江东流水
206 阅读5分钟

单元测试是前端一个很重要的方向，鉴别一个开源库是否靠谱的一个标准是它的单元测试是否完善。有了完整的单元测试，未来你去重构现有代码或者是增加新的需求都会有十足的把握不出现 regression bug。

本文及后续的文章会使用开源测试框架 Jest，它是 Facebook 出品的一个测试框架，相对其他测试框架，它的一大特点就是内置了常用的测试工具，比如自带断言、测试覆盖率工具，实现了开箱即用。

接下的文章，我们的目标是能够学会使用 Jest 去对 JS 库或者是 TS 库编写单元测试，并能把所学应用到实际项目中，后续我们也会针对 Vue 如何做单元测试写一些文章。给自己的代码添加完整的测试代码也是一个非常好的开发习惯，虽然枯燥但十分实用，如果养成这些好习惯会有助于提升行业竞争力。

那么接下来就开启单元测试之旅吧。

如何开始

  1. 安装依赖
npm install --save-dev jest
  1. 简单的例子

首先，创建一个 sum.js 文件

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

module.exports = sum;

然后，创建一个名为 sum.test.js 的文件，这个文件包含了实际测试内容：

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

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

最后，将下面的配置部分添加到你的 package.json 里面

{
  "scripts": {
    "test": "jest"
  }
}
  1. 运行 npm run test ，jest 将打印下面这个消息

image.png

转译器

如今 2022 年，无论我们写业务还是写测试，都会采用比较高级的 JavaScript 语法，或者 TypeScript。

但是，Jest 本身不做代码转译工作。  在执行测试时，它会调用已有的 转译器/编译器 来做代码转译。在前端，我们最熟悉的两个转译器就是 Babel (opens new window)以及 TSC (opens new window)了。

支持 ES6 语法

我们知道 Jest 是跑在 Nodejs 环境中的，Nodejs 采用的是 CommonJS 的模块化规范，使用 require 引入模块；而 import 是 ES6 的模块化规范关键字，想要使用 import，必须引入 babel 转义支持，通过 babel 进行编译，使其变成 node 的模块化代码。

如以下文件改写成 ES6 写法后，运行 npm run test将会报错。

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

import { sum } from '../sum';

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

image.png

为了能使用这些新特性，我们就需要使用 babel 把 ES6 转成 ES5 语法。

解决办法：

  • 安装依赖：npm install --save-dev @babel/core @babel/preset-env
  • 配置.babelrc： { "presets": ["@babel/preset-env"] }

再次运行 npm run test ，问题解决。这是因为Jest 运行时内部先执行(babel-jest)，它会检测是否安装 babel-core了，然后取 .babelrc 中的配置，运行测试之前结合 babel 先把测试用例代码转换一遍，然后再进行测试。

支持 typescript

类似于支持 ES6 语法，jest 需要借助 Babel 去解析 TypeScript 文件转化为js文件，再进行测试。

解决办法：

  • 安装依赖：npm install --save-dev @babel/preset-typescript @types/jest
  • 配置.babelrc： { "presets": ["@babel/preset-env", "@babel/preset-typescript"] }

不过，在配合使用 TypeScript 与 Babel 时，它有个缺点。 因为 Babel 对 Typescrip 的支持是纯编译形式（无类型校验），因此Jest在运行测试时不会对它们进行类型检查。 如果需要类型校验，可以改用ts-jest，也可以单独运行TypeScript编译器 tsc （或作为构建过程的一部分）。

解决办法:

  • 安装依赖: npm i -D ts-jest

这里 ts-jest 一定要和 jest 的大版本一致！  比如 27 对 27，或者 26 对 26，否则会有兼容问题！

  • 配置在 jest.config.js
"transform": {
   ".(ts|tsx)": "ts-jest"
}

jest 配置文件

下面我们来看一份简单的 jest 配置文件，这一份配置的项目是利用 TypeScript 开发一个 js 的开源库：

// package.json
{
  "jest": {
      "transform": {
        ".(ts|tsx)": "ts-jest"
      },
      "testEnvironment": "jsdom",
      "testRegex": "/test/.*\\.(test|spec)\\.(ts)$",
      "moduleFileExtensions": [
        "ts",
        "tsx",
        "js"
      ],
      "coveragePathIgnorePatterns": [
        "/node_modules/",
        "/test/"
      ],
      "coverageThreshold": {
        "global": {
          "branches": 90,
          "functions": 95,
          "lines": 95,
          "statements": 95
        }
      },
      "collectCoverageFrom": [
        "src/*.{js,ts}",
        "src/**/*.{js,ts}"
      ],
      "setupFilesAfterEnv": [
        "<rootDir>/test/boot.ts"
      ]
   },
}

transform

简单地说就是一种转换器配置，比如我们这里的

"transform": {
  ".(ts|tsx)": "ts-jest"
}

表示的就是使用 ts-jest 工具把 .ts 和 .tsx 文件内容转换成 JavaScript，因为项目是使用 TypeScript 编写测试代码，而 Node.js (jest跑在nodejs环境中)是不能直接支持 TypeScript 的，所以需要配置转换器。

testEnvironment

测试环境。默认是 node。

"testEnvironment": "jsdom"

表示它是一个类浏览器的测试环境，我们可以使用浏览器环境中的一些 API。

如果jest的版本是29以上，那么需要单独安装 jest-environment-jsdom

testRegex

要测试文件的正则表达式。

"testRegex": "/test/.*\.(test|spec)\.(ts)$"

表示 test 目录下所有以 .test.ts 和 .spec.ts 的文件都需要跑测试。

moduleFileExtensions

模块文件扩展名，当你去引入一个模块并没有指定扩展名的时候，它会依次尝试去添加这些扩展名去找你引入的模块文件。

"moduleFileExtensions": [
  "ts",
  "tsx",
  "js"
]

表示优先找 .ts 的模块、然后是 .tsx，最后是 .js。

测试覆盖率

  1. coverageThreshold

测试覆盖率的阈值设定，当我们的测试覆盖率达不到阈值的时候，测试会失败。

"coverageThreshold": {
  "global": {
    "branches": 90,
    "functions": 95,
    "lines": 95,
    "statements": 95
  }
}

表示全局的代码分支覆盖率要达到 90%，方法覆盖率要达到 95%，代码行数覆盖率达到 95%，声明覆盖率达到 95%。

什么是单元测试覆盖率？

单元测试覆盖率是一种软件测试的度量指标，指在所有功能代码中，完成了单元测试的代码所占的比例。有很多自动化测试框架工具可以提供这一统计数据，其中最基础的计算方式为：单元测试覆盖率 = 被测代码行数 / 参测代码总行数 * 100%

  1. collectCoverageFrom

收集指定文件的测试覆盖率(即使你没为这些文件编写测试)，它的值为 glob patterns (opens new window)类型。

"collectCoverageFrom": [
  "src/*.{js,ts}",
  "src/**/*.{js,ts}"
]

表示收集 src 目录以及它的所有子目录中的 js 和 ts 文件的测试覆盖率。

image.png

image.png

分支覆盖率：意思你如果你有个函数里面有几个if else，那么你编写测试用例的时候，一定要多写几个，保证每个if 都能执行。

  1. setupFilesAfterEnv

测试框架安装后立即执行的代码文件列表。

"setupFilesAfterEnv": [
  "<rootDir>/test/boot.ts"
]

表示每次跑具体测试代码之前会先运行 <rootDir>/test/boot.ts 中的代码，<rootDir> 表示当前项目的根目录。这个配置在之后的章节我们会具体介绍。

avatar
文章
阅读
粉丝