如何在CRA5 React项目中用Jest测试Tailwind CSS树摇功能？

能否不编写自定义PostCSS配置，仅使用CRA5默认Webpack配置，通过Jest测试Tailwind CSS的树摇（pruning）功能？

目前Tailwind似乎会忽略.test.tsx文件中的所有类，未将它们包含在输出样式中。

相关文件内容 #

tailwind.config.js #

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,test.jsx,test.tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

index.tsx #

import React from "react";
import ReactDOM from "react-dom/client";
import "./styles/index.scss";
import App from "./Views/App/App";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.scss #

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

body {
  ...
}

App.test.tsx #

import { render, screen } from "@testing-library/react";

describe("Tailwind Pruning", () => {
  test("Should include style", () => {
    const expected = "rgb(220, 38, 38)";

    render(<span className="text-red-600" data-testid="tailwind-test"></span>);
    const dom = screen.getByTestId("tailwind-test");
    const actual = getComputedStyle(dom).color;

    expect(actual).toBe(expected);
  });

  // tailwind should fail to include the style for this test
  test("Should not include style", () => {
    const expected = "";

    render(<span className={`${"text"}-${"red"}-${600}`} data-testid="tailwind-test"></span>);
    const dom = screen.getByTestId("tailwind-test");
    const actual = getComputedStyle(dom).color;

    expect(actual).toBe(expected);
  });
});

可以实现，但需要调整几个关键配置和测试逻辑：

1. 确保Tailwind扫描测试文件生效
   你的tailwind.config.js已经包含了测试文件，但CRA的Jest环境默认不会触发Tailwind的实时编译——Jest运行时使用的是预构建的CSS文件，而非重新执行PostCSS流程。需要确保生产/开发环境构建时，Tailwind确实扫描到了测试文件中的静态类名。

2. 修改Jest的CSS加载逻辑
   默认情况下，Jest用identity-obj-proxy模拟样式，不会加载真实编译后的Tailwind CSS。要测试树摇效果，需让Jest加载实际编译后的全局样式：

   • 安装css-loader和style-loader（若未安装）
   • 在package.json或jest.config.js中修改moduleNameMapper：

     "moduleNameMapper": {
       "^.+\\.(css|scss)$": "css-loader!style-loader!./src/styles/index.scss"
     }
     

   直接指向你的全局样式文件，确保Jest加载完整编译后的Tailwind CSS。

3. 修正测试预期值

   • 第一个测试：如果text-red-600被Tailwind静态扫描捕获（包括测试文件），编译后的CSS会包含该类，测试应通过。
   • 第二个测试：动态拼接的类名无法被Tailwind的静态扫描识别，不会被纳入编译结果，但getComputedStyle(dom).color不会返回空字符串，而是浏览器默认文本颜色（通常为rgb(0, 0, 0)），需修改预期值为对应默认颜色。

4. 直接验证编译结果
   可以查看build目录下的编译后CSS文件，确认text-red-600存在、动态拼接的类不存在，以此辅助验证树摇效果。

另外，CRA5默认PostCSS配置已集成Tailwind支持，只要正确配置tailwind.config.js的content字段，无需自定义PostCSS配置即可实现树摇。

内容的提问来源于stack exchange，提问作者nick zoum