使用Jest测试框架测试JS项目

前言

JavaScript的测试框架有很多，这里主要记录一些自己在初次使用jest时遇到的一些问题。详细使用文档可以参照官方说明文档。

简介

Jest 是一款优雅、简洁的 JavaScript 测试框架。

Jest 支持 Babel、TypeScript、Node、React、Angular、Vue 等诸多框架！

Jest 是由 Facebook 开发的 JavaScript 测试框架。它是测试 React 的首选，并且得到了 React 社区的支持和开发。

• 中文使用文档：https://jestjs.io/zh-Hans/docs/getting-started
• 官方网址：https://jestjs.io/
• Github：https://github.com/facebook/jest

使用

安装

npm install -D jest

jest支持多种配置方式，这里采用了jest.config.cjs的配置，详见Jest 配置。

const config = {
  // 是否应在运行期间报告每个单独的测试。执行后所有错误仍将显示在底部
  verbose: true,
  // 模块使用的文件扩展名
  moduleFileExtensions: [
    'js',
    'json'
  ],
  // 测试用例目录
  testMatch: [
    '**/tests/**/*.js'
  ],
  // 是否收集测试时的覆盖率信息
  collectCoverage: true,
  // 测试覆盖度输出路径
  coverageDirectory: './.coverage',
  // 测试覆盖的文件
  collectCoverageFrom: [
    'src/**/*.{js,jsx}',
    '!**/node_modules/**'
  ],
  // 测试运行的环境
  testEnvironment: 'node',
};

module.exports = config;

package.json中可配置

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "build": "webpack --config webpack.config.js",
    "test": "jest"
  }
}

虽然安装的是jest，一般实际使用的是@jest/globals，jest包依赖了它。

若是要固定版本，也可以执行npm install -D @jest/globals。

代码中使用示例：

/**
 * @jest-environment jsdom
 */
import { test, expect, describe, afterEach } from '@jest/globals';
import path from 'path';

describe('test load script in html', () => {
  afterEach(() => {
    delete window.Enum;
  });
  test('test using Enum in html script tags', function () {
    expect(window.Enum).toBeUndefined();
    const tag = document.createElement('script');
    tag.type = 'text/javascript';
    tag.src = path.resolve(__dirname, 'test.html');
    tag.onload = () => {
      expect(window.Enum).toBeDefined();
    };
    document.body.appendChild(tag);
  });
});

特别注意： 代码片段中使用的testEnvironment是jsdom，

虽然配置文件中指定了运行环境 ，但是若是在特殊情况下使用，可以在文件头部申明文件自身运行的测试环境。

jsdom用于模拟在浏览器中的使用，此时需要安装依赖npm install -D jest-environment-jsdom

执行测试

npm run test

输出结果

遇到的问题

问题1：SyntaxError: Unexpected token ‘.’

> jest

./node_modules/jest/node_modules/jest-cli/build/run.js:135
    if (error?.stack) {
              ^
SyntaxError: Unexpected token '.'

?.运行符，nodejs在14+版本中才支持，

本地node版本太低，使用nvm use 14切换版本即可。

问题2：Missing class properties transform

> jest

 FAIL  tests/test_enum.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    ...

    Details:

    SyntaxError: ./src/index.js: Missing class properties transform.
       8 |
       9 | export default class Enum {
    > 10 |   #items = [];
         |   ^^^^^^^^^^^^
      11 |   #config = {};
      12 |   /**
      13 |    *

因为使用了babel来编译js，对以私有属性的支持需要：

 npm install -D @babel/plugin-proposal-class-properties

并在.babelrc配置中添加plugin相关

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

参考文档

1. Jest 配置项
2. Jest中文说明文档–断言
3. MDN - 可选链运算符?.
4. error-while-jest-setup-for-snapshots-in-if-error-stack
5. error-missing-class-properties-transform