如何修复Vitest+Happy-Dom+RTL测试中类名不渲染的问题

问题根源 #

你遇到的问题是因为Vitest默认的test.css: true仅启用基础CSS加载，但没有正确配置CSS Modules的处理规则，导致测试环境下CSS模块导出的styles对象为空或类名未生成。浏览器中正常显示是因为项目主Vite配置已经正确处理了CSS Modules，但Vitest的配置没有同步这些规则。

解决方案 #

1. 完善Vitest配置，添加CSS Modules规则 #

修改vitest.config.ts，在Vite的全局css配置中明确启用CSS Modules，并指定类名生成规则（测试环境可设置为保留原类名，方便断言）：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  // 全局Vite CSS配置，处理CSS Modules
  css: {
    modules: {
      // 测试环境生成与源码一致的类名，便于断言
      generateScopedName: '[local]',
      // 匹配你的CSS模块文件（根据项目实际规则调整，比如.module.css）
      include: /\.css$/
    }
  },
  test: {
    environment: 'happy-dom',
    setupFiles: ['./src/utils/test-utils/setup-tests.ts'],
    css: true
  }
});

2. 调整测试断言，使用导出的styles类名（可选） #

如果不想修改类名生成规则，也可以直接用组件中导入的styles对象做断言，避免依赖硬编码类名：

// 在button-group.test.tsx中导入对应样式文件
import styles from '../style.css';

// 修改断言逻辑
expect(container.firstChild).toHaveClass(styles['button-group']);

3. 排查setup-tests.ts的CSS mock #

检查你的setup-tests.ts，如果存在以下mock代码，会导致CSS模块被置空，需要删除或注释：

// 错误示例：禁止在测试中mock CSS模块
vi.mock('*.css', () => ({}));

验证方法 #

运行测试前，可在ButtonGroup组件中保留console.log(styles)，如果测试环境下输出的styles['button-group']是预期类名（如button-group），说明配置已生效。

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