如何配置Jest同时兼容Vue单元测试与supertest/Express测试

冲突原因 #

@vue/cli-plugin-unit-jest预设内置了jsdom浏览器环境、Vue单文件组件转译、前端路径别名解析等专属规则，这些规则仅适用于前端Vue代码，全局生效时会对Node.js环境下运行的Express后端代码做错误转译，导致supertest用例执行失败。移除预设后后端测试可运行，但Vue组件缺少对应的转译规则无法执行。

配置步骤 #

使用Jest原生的projects多项目能力，为前后端测试分别定义独立的匹配规则与运行环境，两类配置互不干扰，全局通用配置可复用。

1. 替换根目录jest.config.js内容如下：

module.exports = {
  // 全局通用配置，所有子测试项目自动继承
  coverageDirectory: "test-reports/",
  coveragePathIgnorePatterns: ["/node_modules/"],
  collectCoverageFrom: [
    "src/**/*.{js,vue}",
    "server/**/*.js"
  ],
  reporters: [
    "default",
    [
      "jest-junit",
      {
        outputDirectory: "test-reports/",
        // 如需拆分前后端报告，可将reporters配置移到对应子项目中单独定义输出文件名
        outputName: "test_junit.xml"
      }
    ]
  ],
  projects: [
    // 前端Vue测试项目配置
    {
      displayName: "vue",
      // 替换为你的Vue测试文件实际存放路径，确保不会匹配到后端测试文件
      testMatch: ["<rootDir>/tests/unit/**/*.spec.[jt]s?(x)"],
      preset: "@vue/cli-plugin-unit-jest",
      testEnvironment: "jsdom"
    },
    // 后端Express测试项目配置
    {
      displayName: "express",
      // 替换为你的Express测试文件实际存放路径，确保不会匹配到前端测试文件
      testMatch: ["<rootDir>/tests/server/**/*.spec.[jt]s?(x)"],
      testEnvironment: "node",
      // 后端使用Node原生模块解析规则，不需要Vue相关转译
      moduleFileExtensions: ["js", "json", "node"]
    }
  ]
};

2. 按配置里的testMatch规则整理测试文件目录：
   • 所有Vue组件测试文件放到tests/unit目录下
   • 所有Express/supertest接口测试文件放到tests/server目录下
     禁止两类测试文件存放路径重叠，避免被错误的测试项目加载。
3. 若后端代码使用了ES Module语法，可在express子配置项中添加对应babel转译规则，不要将转译规则加到全局配置中，避免影响Vue测试的转译逻辑。

验证 #

配置完成后直接执行npx jest即可同时运行两类测试，控制台会通过displayName标记每条用例所属的测试项目，覆盖率报告、junit报告都会统一输出到指定的test-reports目录下。

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