Vue3 Jest单测环境搭建1. 安装Jest 2. 配置babel 项目在node环境执行单测，不支持es6，需要

1. 安装Jest

npm install --save-dev jest

2. 配置babel 项目在node环境执行单测，不支持es6，需要使用babel转换es6语法=>es5。需安装babel-jest、@babel/core、@babel/preset-env

npm i babel-jest @babel/core @babel/preset-env -D

在根目录新建babel.config.*文件，添加如下配置：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "current"
                }
            }
        ]
    ]
}

3. jest配置

创建jest.config.*文件，也可通过jest --init生成一个基础配置文件jest.config.*。

/* eslint-env node */
module.exports = {
    // 指出是否收集测试时的覆盖率信息
    "collectCoverage": true,
    // 测试覆盖率报告输出目录
    "coverageDirectory": "coverage",
    // 需要手机单测覆盖率信息的文件
    "collectCoverageFrom": [
        "src/**/*.{js, jsx}",
        "!**/node_modules/**"
    ],
    "transform": {
        "^.+\\.jsx?$": "babel-jest"
    },
    // jest默认不转换node_modules文件夹，一般npm下载的库都是转化后的，但是有些库并未转化，需要将它们排除
    "transformIgnorePatterns": [
        "node_modules/(?!variables/.*)"
    ],
    // 如果项目中配置了别名，jest中也需要配置，否则读取不到文件
    "moduleNameMapper": {
        '@/(.*)$': '<rootDir>/src/$1'
    },
    // 匹配测试文件
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.jsx?$",
}

4. 配置jest运行脚本

{
    ...
    "scripts": {
        "test": "jest",
        "test:coverage": "jest --coverage",
        "coverage": "open ./coverage/lcov-report/index.html"
    }
    ...
}

遇到问题

jest.config.cjs文件报错module is not defined and process is not defined in eslint

解决方式1：在eslint配置文件中配置env

{
  ...
  env: {
    node: true
  }
  ...
}

解决方式2：在报错文件顶部添加说明

/* eslint-env node */

参考