前言

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:135if (error?.stack) {^
SyntaxError: Unexpected token '.'

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

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

问题2：Missing class properties transform

> jestFAIL  tests/test_enum.js● Test suite failed to runJest encountered an unexpected tokenJest 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