Nuxt.js项目Vitest覆盖率仅部分文件受影响问题排查求助

问题现象 #

• 覆盖率报告仅统计少量组件，已有测试用例的组件（如ColorPalette、Index）未出现在报告中
• 删除所有测试文件后，仅之前显示为绿色的组件被标记为未覆盖（红色）
• 将未被统计的组件移至已被统计的文件夹，仍无法纳入覆盖率报告

当前Vitest配置（vitest.config.ts） #

import { defineVitestConfig } from "@nuxt/test-utils/config";

export default defineVitestConfig({
  test: {
    environment: "nuxt",
    coverage: {
      provider: "istanbul",
      reporter: ["text", "lcov", "html"],
      include: [
        "components/**/*.vue",
        "pages/**/*.vue",
        "layouts/**/*.vue",
        "composables/**/*.{js,ts}",
        "utils/**/*.{js,ts}",
      ],
      exclude: [
        "**/node_modules/**", "**/coverage/**"
      ],
      all: true,
      reportOnFailure: true,
    },
  },
});

补充测试用例与组件代码 #

ColorPalette.test.ts #

import { mount } from "@vue/test-utils";
import { describe, it, expect } from "vitest";
import {ColorPalette} from "#components";

describe("ColorPalette Component", () => {
  const wrapper = mount(ColorPalette);

  it("renders the component", () => {
    expect(wrapper.exists()).toBe(true);
  });

  it("displays the correct title", () => {
    const title = wrapper.find("h2");
    expect(title.text()).toBe("Placeholder Color palette:");
    expect(title.classes()).toContain("font-bold");
    expect(title.classes()).toContain("text-lg");
    expect(title.classes()).toContain("mt-8");
  });
});

ColorPalette.vue #

<script setup lang="ts"></script>

<template>
  <div>
    <h2 class="font-bold text-lg mt-8">Placeholder Color palette:</h2>
    <div class="flex flex-row items-center space-x-2">
      <div class="w-12 h-12 bg-primary" />
      <p>Primary</p>
    </div>
    <div class="flex flex-row items-center space-x-2">
      <div class="w-12 h-12 bg-secondary" />
      <p>Secondary</p>
    </div>
    <div class="flex flex-row items-center space-x-2">
      <div class="w-12 h-12 bg-accent" />
      <p>Accent</p>
    </div>
    <div class="flex flex-row items-center space-x-2">
      <div class="w-12 h-12 bg-text" />
      <p>Text</p>
    </div>
    <div class="flex flex-row items-center space-x-2">
      <div class="w-12 h-12 bg-background" />
      <p>Background</p>
    </div>
  </div>
</template>

<style scoped></style>

排查与解决建议 #

• 校验路径匹配规则：确认include配置的路径是否基于项目根目录，可临时将include改为["**/*.vue", "**/*.{js,ts}"]，验证是否能捕获所有目标文件；若生效再逐步缩窄范围
• 明确文件扩展名：在coverage配置中添加extension: ['.vue', '.js', '.ts']，确保Istanbul能识别所有需要统计的文件类型
• 调整组件导入方式：将测试用例中的别名导入改为相对路径（如import ColorPalette from '../components/ColorPalette.vue'），验证是否因别名解析问题导致组件未被统计
• 清除缓存：删除.nuxt、node_modules/.cache/vitest目录，重新安装依赖后再执行覆盖率测试
• 检查版本兼容性：确认@nuxt/test-utils、vitest、istanbul依赖版本兼容，可尝试升级到最新稳定版本或回退到已知兼容版本

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