单元测试中tailwindcss样式没有生效?

Question

testing-library/react单元测试react组件，但是tailwindcsss样式好像在render渲染得到的dom中并没有生效。

技术栈:

• vite
• react
• vitest
• testing-library/react
• testing-library/jest-dom

测试

// test/comment.test.jsx
import { it, expect } from "vitest";
import { screen, render } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import CommentTitle from "../components/Comment/CommentTitle";

it("应该有一个排序的图标,hover的时候出现一个列表，包含两个列表单元，内容分别为最热优先和最新优先，图标旁边还有一段文字内容为排序", async () => {
  const user = userEvent.setup();
  render(<CommentTitle commentListLength={0} />);

  expect(screen.queryByText("排序")).not.toBeNull();

  const sortByIcon = screen.queryByTestId("sort-by-icon");
  expect(sortByIcon).not.toBeNull();
  expect(screen.queryByText("最热优先")).not.toBeVisible();
  expect(screen.queryByText("最新优先")).not.toBeVisible();
  await user.hover(sortByIcon);
  expect(screen.queryByText("最热优先")).toBeVisible();
  expect(screen.queryByText("最新优先")).toBeVisible();
});

手动测试来看不应该失败，但是自动测试在第二个expect上就失败了。

组件

// src/components/CommentTitile.jsx
import Proptypes from "prop-types";
import { MdSort } from "react-icons/md";
function CommentTitle({ commentListLength }) {
  return (
    <div
      data-testid="comment-title"
      className="flex flex-row items-center gap-6 mb-20 "
    >
      <span data-testid="number-of-comments">
        留言{commentListLength || ""}
      </span>
      <div className="flex flex-row gap-2 items-center">
        <div className="flex flex-row items-center relative cursor-pointer">
          <div className="self-start text-lg peer" data-testid="sort-by-icon">
            <MdSort />
          </div>
          <ul className="peer-hover:block hidden absolute rounded  whitespace-pre top-6 left-1/2 -translate-x-1/2 p-2">
            <li>最热优先</li>
            <li>最新优先</li>
          </ul>
        </div>
        <div data-testid="sort-text">排序</div>
      </div>
    </div>
  );
}
...

尝试

如果我时使用内联样式style={{display: "none"}}让列表在刚开始的时候消失，在hover之前的测试可以通过但是之后的失败了（没法在内联样式上使用伪类）。猜测应该是tailwindcss样式没有生效。

src/index.css中导入了tailwindcss的一些样式(@tailwindcss base; ...)，但是这里我们使用render来渲染一个组件，并没有导入这个样式，src/index.css是在src/main.jsx中导入的。
所以我尝试做了以下修改：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    setupFiles: "./testSetup.js",
    globals: true,
    environment: "jsdom",
    css: {                            // 添加了这一条配置
      include: "./src/index.css"  
    }
  },
});

vitest该配置中的说明

css
Type: boolean | { include?, exclude?, modules? }
Configure if CSS should be processed. When excluded, CSS files will be replaced with empty strings to bypass the subsequent processing. CSS Modules will return a proxy to not affect runtime.

好像也没有用。

然后我在testSetup.js中导入src/index.css，测试还是没有通过。

// testSetup.js
import "@testing-library/jest-dom/vitest";
import "./src/index.css";

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    setupFiles: "./testSetup.js",
    globals: true,
    environment: "jsdom",
    // css: {
    //   include: "./src/index.css"
    // }
    css: true,
  },
});

到底是什么原因?

• tailwindcss没有导入？
• tailwindcss没有解析？
• jsdom不支持?

附:

• codesandbox
• github