GitLab CI 中使用 Jest 进行测试的技巧详解

Jest 是一个流行的 JavaScript 测试框架，被许多前端和开发团队广泛应用于单元测试、集成测试、快照测试等方面。在 GitLab 中使用 Jest 进行测试，可以自动化测试过程，为开发过程提供更高的质量保障。本文将详细讲解在 GitLab CI 中如何使用 Jest 进行测试，并提供示例代码作为参考。

安装 Jest

在使用 Jest 之前，需要先安装 Jest 和其相关库。在全局安装 Jest 之前，需要先安装 Node.js 和 npm。可以通过以下命令检查 Node.js 和 npm 版本：

node -v
npm -v

如果未安装，可以在 https://nodejs.org 下载安装。

安装 Jest 的方式可以采用全局安装或者在项目中安装，这里选择在项目中安装。在项目目录下执行以下命令：

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

其中，babel-jest 和 @babel/core 是为使用 ES6 语法做准备的，@babel/preset-env 是为了让 Jest 支持新的 JavaScript 语法特性。

配置 Jest

Jest 使用的默认配置文件是 jest.config.js，需要在项目根目录下创建该文件并进行配置。常用的配置项包括：

roots：配置 Jest 执行测试时的根目录，默认为当前目录。
testEnvironment：配置 Jest 执行测试时的环境，默认为 jsdom。
testRegex：配置 Jest 执行测试时匹配到的文件名称，默认为 (/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$，也就是匹配以 __tests__ 其中的目录下以 .test.js 或 .spec.js 结尾的文件。
moduleFileExtensions：配置 Jest 处理的文件扩展名，默认值为 ['js', 'json', 'jsx']。
transform：配置 Jest 处理的文件格式，默认为 {'^.+\\.(js|jsx)$': 'babel-jest'}，也就是用 babel-jest 处理以 .js 或 .jsx 结尾的文件。

示例 jest.config.js 文件内容如下：

-- -------------------- ---- -------
-------------- - -
  ------ ------------------
  ---------------- -------
  ---------- ---------------------------------------------
  --------------------- ------ ------- -------
  ---------- -
    -------------- -------------
  --
--

在 GitLab CI 中使用 Jest

在 GitLab CI 中使用 Jest 进行测试，需要先在 .gitlab-ci.yml 文件中添加测试任务。在项目根目录下创建 .gitlab-ci.yml 文件，并添加以下任务：

test:
  image: node:14.17.6
  script:
    - npm i
    - npm run test

其中，test 是自定义的任务名称，image 是使用的 Docker 镜像，这里使用的是 Node.js 14.17.6 版本。script 是运行的脚本，先运行 npm i 安装依赖，然后运行 npm run test 运行 Jest 测试。如果需要在测试运行之前先编译代码，可以在 script 中添加相应的命令。例如：

test:
  image: node:14.17.6
  script:
    - npm i
    - npm run build
    - npm run test

在运行 Jest 测试之前，需要添加相应的测试脚本。可以在 package.json 文件中的 scripts 选项中添加：

"scripts": {
  "test": "jest"
}

编写 Jest 测试

在 __tests__ 目录下新建测试文件，以 .spec.js 或 .test.js 结尾，编写测试代码。例如：

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

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

在上面的例子中，测试了 sum 函数的功能，期望调用该函数以 1 和 2 为参数时返回 3。

运行 Jest 测试

安装完 Jest 并编写好测试代码后，可以使用命令行运行测试。在项目目录下运行以下命令：

npm run test

如果所有测试用例都通过，将输出类似于如下的内容：

 PASS  __tests__/sum.test.js
  add
    ✓ adds 1 + 2 to equal 3 (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total

如果测试用例有未通过的，将输出类似如下的内容：

-- -------------------- ---- -------
 ----  ---------------------
  ---
    - ---- - - - -- ----- - -----

  - --- - ---- - - - -- ----- -

    -------------------------------

    --------- -
    --------- -

      - - --------------- -- -- -
      - -   ---------- - - - -- ----- --- -- -- -
    - - -     ------------- ------------
        -                       -
      - -   ---
      - - ---

      -- ------------------ ----------------------------

总结

Jest 是一个流行的 JavaScript 测试框架，可以自动化测试过程，为开发过程提供更高的质量保障。在 GitLab 中使用 Jest 进行测试，通过配置 Jest 和编写相应的测试代码，可以轻松地对代码进行单元测试、集成测试、快照测试等。在该过程中，需要注重配置的使用和给予代码的充分测试，以确保代码的质量和稳定性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6519274f95b1f8cacd15d880