Tailwind CSS 类在 Vitest 测试期间未应用为样式

Question

我目前正在使用 Vite 和 Vitest 对我的 React 组件进行单元测试。但是，我遇到了一个问题，即应用到我的组件的 Tailwind CSS 类在测试执行期间未被识别为样式。

有人可以帮忙吗？

提前致谢！

Navlink.tsx

<li className="text-6xl sm:text-8xl">
  {title}
</li>

Navlink.test.tsx

it("renders correct styles", () => {
    window.innerWidth = 767;
    render(<NavLink title={title} />);
    const linkElement = screen.getByText(title);
    expect(linkElement).toHaveStyle("font-size: 8rem");
});

vite.config.ts

/// <reference types="vitest" />
/// <reference types="vite-plugin-svgr/client" />
import * as path from "path";
import react from "@vitejs/plugin-react-swc";

import { defineConfig } from "vite";
import viteCompression from "vite-plugin-compression";
import svgr from "vite-plugin-svgr";

export default defineConfig({
  plugins: [viteCompression(), react(), svgr()],
  test: {
    coverage: {
      all: false,
      provider: "c8",
      reporter: ["text", "json", "html"],
      include: ["src/**/*.{ts,tsx}"],
      exclude: [
        "**/node_modules/**",
        "**/dist/**",
        "**/coverage/**",
        "**/public/**"
      ],
      lines: 80,
      functions: 80,
      branches: 80,
      statements: 80
    },
    globals: true,
    environment: "jsdom",
    setupFiles: "./src/setup-tests.ts"
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("@react-three")) {
            return id.toString().split("node_modules/")[1].split("/")[0].toString();
          }
        }
      }
    }
  },
  resolve: {
    alias: {
      "@components": path.resolve(__dirname, "./src/components"),
      "@models": path.resolve(__dirname, "./src/models"),
      "@ui": path.resolve(__dirname, "./src/ui"),
      "@services": path.resolve(__dirname, "./src/services"),
      "@utils": path.resolve(__dirname, "./src/utils"),
      "@pages": path.resolve(__dirname, "./src/pages"),
      "@constants": path.resolve(__dirname, "./src/constants"),
      "@three": path.resolve(__dirname, "./src/three"),
      "@type": path.resolve(__dirname, "./src/types"),
      "@hooks": path.resolve(__dirname, "./src/hooks"),
      "@features": path.resolve(__dirname, "./src/features"),
      "@store": path.resolve(__dirname, "./src/store"),
      "@assets": path.resolve(__dirname, "./src/assets")
    }
  }
});

Answer 1

添加

css: true

应该可以解决问题。

export default defineConfig({
  ...,
  test: {
    css: true,
    ...,
  },
});