Tailwind CSS classes not applied as styles during Vitest testing

Question

I am currently using Vite with Vitest to perform unit testing for my React components. However, I am encountering an issue where the Tailwind CSS classes applied to my components are not being recognized as styles during the test execution.

can anyone help?

Thank in adnvace!

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")
    }
  }
});

Conners

Answer 1

First you will need to import your stylesheet with the Tailwind directives in your ./src/setup-tests.ts file. And then add css: true to the test config in your vite config.

./src/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

./src/setup-tests.ts

import "./tailwind.css";

vite.config.ts

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

Mezzanine