Vue3项目中Jest误标记CSS未测试、JS测试状态异常的解决

一、解决SFC中CSS被标记未测试的问题 #

默认情况下Jest会把SFC里的style标签纳入覆盖率统计，通过以下配置可彻底排除：

1. 修改覆盖率收集规则，排除独立CSS文件
   更新jest.config.js里的collectCoverageFrom，明确跳过所有CSS/预处理器文件：

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverage: true,
  collectCoverageFrom: [
    'src/**/*.vue',
    'src/**/*.js',
    '!src/main.js',
    '!src/**/*.css',
    '!src/**/*.scss', // 使用SCSS则添加，LESS同理
    '!src/**/*.less'
  ],
  // 切换到v8覆盖率引擎，对SFC的支持更精准
  coverageProvider: 'v8',
  // 忽略node_modules目录
  coveragePathIgnorePatterns: [
    '<rootDir>/node_modules/'
  ]
}

2. 让Vue-jest跳过style标签的覆盖率统计
   在jest.config.js中添加transform自定义配置，直接告知vue-jest忽略style部分：

transform: {
  '^.+\\.vue$': ['@vue/vue3-jest', {
    coverage: {
      ignoreStyle: true
    }
  }],
  '^.+\\.js$': 'babel-jest'
}

二、修复JS测试状态判定混乱的问题 #

1. 确认依赖版本兼容 #

保证使用的@vue/cli-plugin-unit-jest是适配Vue3的版本，或直接使用@vue/vue3-jest，版本不匹配极易导致覆盖率统计异常。

2. 细化覆盖率收集范围 #

别模糊匹配所有.vue和.js，精准指定需要测试的文件，比如仅收集组件、工具函数、页面文件：

collectCoverageFrom: [
  'src/components/**/*.vue',
  'src/utils/**/*.js',
  'src/views/**/*.vue',
  '!src/main.js',
  '!src/**/*.css',
  '!src/**/*.scss'
]

3. 修正已测试函数/变量的误判 #

• 检查测试用例是否真正覆盖目标逻辑：比如组件的methods、computed，需主动触发对应逻辑，不能仅渲染组件就算覆盖。
• 若存在确实无需测试的变量/函数，添加注释让Jest跳过统计：

/* istanbul ignore next */
const tempVar = '无需测试的变量';

/* istanbul ignore next */
function helperFunc() {
  // 内部辅助函数，无需测试
}

4. 清理Jest缓存 #

Jest会缓存测试结果，旧缓存可能导致覆盖率数据失真。运行测试时添加--no-cache参数：

npm run test:unit -- --no-cache

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