CSS Modules样式在单元测试中不生效，是因为JSDOM不会自动注入样式，需手动读取CSS文本并用insertRule注入到styleSheets，同时避免@import污染和全局共享styleSheets。
单元测试里CSS模块化样式不生效，根本不是类名没生成，而是样式根本没进DOM——getComputedStyle返回空、断言颜色/尺寸失败，基本都卡在这一步。
为什么测试环境里CSS Modules的样式“看不见”
Webpack或Vite构建时，Button.module.css确实会编译出哈希类名，但测试运行在JSDOM里，它不会自动执行
-
import styles from './Button.module.css'只返回类名映射对象，不触发样式注入 - JSDOM默认忽略
<link rel="stylesheet">和<style>标签内容 - 即使手动
document.head.appendChild(styleEl)，若没调用insertRule或没等sheet ready，getComputedStyle仍返回空
测试中正确注入CSS Modules样式的三步法
别依赖构建产物或全局setup，每个测试用例自己管自己的样式上下文。
- 用
document.createElement('div')创建独立容器，每次测试前清空并重挂载，避免跨测试污染 - 读取CSS文件内容（如
fs.readFileSync('./Button.module.css', 'utf8')），用document.styleSheets[0].insertRule()逐条注入——注意JSDOM里styleSheets可能为空，需先创建style元素并append到head - 确保元素已
container.appendChild(el)后再调用getComputedStyle(el)；JSDOM对未连接元素返回空对象，且不报错
警惕@import和@layer穿透容器边界
它们在测试里不会被隔离——哪怕你在div容器里渲染组件，@import url('./theme.css')或@layer base仍会作用到整个JSDOM文档，污染其他测试用例。
立即学习“前端免费学习笔记（深入）”；
- 测试中禁用
@import：把依赖的CSS内容预编译成字符串，和主样式一起insertRule -
@layer规则无法局部化，测试时应转为内联字符串，或改用:where()模拟作用域 - 如果项目用了
postcss-import，测试配置里得关掉它，否则fs.readFileSync读出来的只是带@import的原始文本，不是最终CSS
jest/vitest里别碰setupFilesAfterEnv全局注入
它会让所有测试共享同一份document.styleSheets[0]，类名哈希冲突概率陡增——A测试注入了.button_abc123，B测试再注入同名规则，后者覆盖前者，断言就崩。
- 真要复用样式逻辑，封装一个
injectCSS(cssText: string)工具函数，在beforeEach里调用，注入后立即清理 - 用
jest.isolateModules或vi.mock隔离CSS模块导入，防止热更新残留影响 - Vite测试模式下，确认
vite.config.ts里css: { devSourcemap: false }，避免style-loader的injectType: 'singleton'争抢同一个
最麻烦的点不在写代码，而在验证：你得确认document.styleSheets[0].cssRules.length真增加了，且el.className匹配的是注入后的哈希值，而不是开发时看到的本地文件名——构建产物和测试注入路径不一致，类名哈希就不同。
