Jest测试Vue2项目.vue文件覆盖率仅统计import语句问题

问题现象 #

• 基于jest + vue-test-utils搭建Vue.js 2项目单元测试环境，测试用例可正常执行，但.vue文件覆盖率统计结果异常。
• 执行jest --coverage命令后，终端输出显示.vue文件覆盖率为100%，但打开覆盖率详情页查看，仅文件顶部的import导入语句被纳入统计，组件内script、template等其余代码完全未被覆盖率工具识别。
• 异常参考截图：
  • 覆盖率总览截图
  • 覆盖率详情截图

排查过程中如需补充其他项目信息，可随时留言。

相关配置 #

package.json 依赖与脚本片段 #

"scripts": {
  "test": "jest --coverage",
 },
"dependencies": {
    "core-js": "3.20.3",
    "single-spa-vue": "2.5.0",
    "systemjs-webpack-interop": "2.3.7",
    "vue": "2.6.14",
    "vue-i18n": "8",
    "vue-router": "3.5.2"
  },
"devDependencies": {
    "@vue/cli-plugin-unit-jest": "~4.5.19",
    "@vue/cli-service": "~4.5.19",
    "@vue/test-utils": "^1.3.0",
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
    "jest-junit": "^13.0.0",
    "jest-transform-stub": "^2.0.0"
}

jest.config.js 完整配置 #

const alias = require("./aliases.config");

module.exports = {
  moduleFileExtensions: ["js", "vue", "json"],
  transform: {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "vue-jest",
    ".+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|avif)$":
      "jest-transform-stub",
  },
  preset: "@vue/cli-plugin-unit-jest",
  testPathIgnorePatterns: ["/node_modules/"],
  modulePathIgnorePatterns: ["/node_modules/"],
  testMatch: ["**/tests/unit/**/*.(unit|test|spec).js"],
  collectCoverage: false,
  collectCoverageFrom: [
    "<rootDir>/src/**/*.{vue,js}",
    "!<rootDir>/src/main.js",
    "!<rootDir>/src/set-public-path.js",
    "!<rootDir>/src/router/index.js",
  ],
  coverageDirectory: "reports/unit-reports/coverage",
  coverageReporters: ["text-summary", "html", "cobertura"],
  moduleNameMapper: {
    ...alias.forJest,
    "@divilo/styleguide-base-front":
      "<rootDir>/tests/mocks/styleguide-base-front.js",
    "@divilo/api-mfes-front": "<rootDir>/tests/mocks/api-mfes-front.js",
  },
  coverageProvider: "babel",
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: -10,
    },
  },
  reporters: [
    "default",
    [
      "jest-junit",
      {
        outputDirectory: "reports/unit-reports/tests",
        outputName: "junit.xml",
      },
    ],
  ],
};

问题原因 #

自定义transform配置覆盖了@vue/cli-plugin-unit-jest预设内置的文件转换规则，且项目devDependencies中未安装vue-jest依赖，导致.vue单文件组件无法被Jest正确编译解析，覆盖率插桩逻辑只能识别文件最外层的import语句，组件内部的业务代码完全没有被纳入统计范围。

修复方案 #

• 安装Vue2版本对应的vue-jest依赖，执行命令：
  npm install --save-dev vue-jest@3

注意：3.x版本vue-jest仅适配Vue2，4.x及以上版本为Vue3设计，不可混用。

• 配置校验：如果不需要自定义特殊转换规则，可以直接删除jest.config.js中的transform字段，完全使用@vue/cli-plugin-unit-jest预设的默认转换配置即可；如果需要保留静态资源、JS文件的自定义转换规则，保留现有transform配置即可，安装完vue-jest后规则可正常生效。
• 清除缓存后重新执行测试，避免历史缓存干扰结果：

npx jest --clearCache
npm run test

内容的提问来源于stack exchange，提问作者Jose Mac