如何在Vitest单元测试覆盖率统计中忽略Vue组件的style标签？

问题背景 #

当使用Vitest统计包含<style>标签的Vue组件单元测试覆盖率时，会出现函数覆盖率（% Funcs）仅为50%的情况，移除<style>标签后所有覆盖率指标恢复100%。这是因为Vue的style块编译后会生成样式注入的辅助函数，这些函数未被单元测试覆盖，从而拉低了函数覆盖率。

解决方案 #

通过配置Vitest的覆盖率规则，全局忽略Vue组件中style块对应的编译代码，即可让覆盖率统计仅关注组件的模板和逻辑部分。

修改项目根目录下的vitest.config.js（或vitest.config.ts），添加如下配置：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    coverage: {
      provider: 'istanbul',
      // 忽略Vue文件中style块编译生成的代码
      instrumenterOptions: {
        istanbul: {
          exclude: ['**/*.vue?vue&type=style*']
        }
      },
      // 同时排除独立的样式文件（可选）
      exclude: [
        '**/*.css',
        '**/*.scss',
        '**/*.less'
      ]
    }
  }
})

原理说明 #

Vitest使用Istanbul作为覆盖率统计工具，上述配置通过instrumenterOptions.istanbul.exclude指定忽略Vue组件中style块对应的编译产物路径（这类路径通常带有?vue&type=style标识），避免统计样式相关的辅助函数，从而让覆盖率结果准确反映组件业务逻辑的覆盖情况。

配置完成后，重新运行测试覆盖率命令（如vitest run --coverage），即可得到所有指标均为100%的结果。

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