防样式污染需用独立DOM容器、禁用自动注入、预编译CSS并动态注入、统一哈希逻辑、确保元素挂载后再调用getComputedStyle，手动管理样式表避免JSDOM限制。
测试环境样式污染怎么防
本地开发或CI里跑CSS测试时，全局样式、第三方库样式、甚至浏览器默认样式都可能干扰断言结果。最直接的解法不是“清空所有样式”，而是让测试运行在干净、可预测的DOM上下文中。jest-css-modules 或 vitest + css-modules 本身不解决隔离问题，得靠容器控制。
- 用
document.createElement('div')创建独立容器，每次测试前清空并重挂载，避免跨测试污染 - 禁用
style标签自动注入（如create-react-app的injectCSS），改用显式insertRule或内联style属性验证 - 警惕
@import和@layer：它们会穿透容器边界，测试中应转为内联字符串或预编译后注入
如何让CSS模块只在测试中生效
CSS Modules 默认生成唯一类名，但测试时若依赖构建产物（如 .Button__root___abc123），就和开发时行为不一致——因为热更新、HMR、甚至 css-loader 的 localsConvention 都会影响输出。关键不是“模拟构建”，而是“复用同一套解析逻辑”。
- 测试中直接 import CSS 文件，但用
identity-obj-proxy替代真实 loader（仅适用于快照/结构断言） - 真要测样式计算值（如
getComputedStyle(el).color），就得走真实构建流程：用rollup-plugin-postcss或vite build --mode test提前产出 CSS 字符串，再动态注入到测试容器 -
jest中慎用setupFilesAfterEnv全局注入样式——它会让所有测试共享同一份sheet，类名哈希冲突概率陡增
为什么 getComputedStyle 在测试里返回空值
这不是JS错误，是DOM生命周期问题：元素没挂载、样式表没加载完成、或者CSS规则被@media或:hover条件屏蔽。尤其在JSDOM里，getComputedStyle 对未连接元素返回空对象，且不报错。
- 确保元素已插入文档：
container.appendChild(el)后再调用，不能只el.outerHTML = '...' - JSDOM默认不解析
link[rel=stylesheet]，需手动读取CSS文件内容，用document.styleSheets[0].insertRule(...)注入 - 避免依赖伪类：JSDOM不支持
:hover状态计算，要用el.classList.add('hover')模拟对应类名规则 - 注意单位：
getComputedStyle返回带单位的字符串（如"16px"），别直接比数字
Vite / Webpack 测试配置怎么避开样式注入冲突
开发服务器和测试环境共用同一份 vite.config.ts 或 webpack.config.js 时，css: { devSourcemap: true } 或 style-loader 的 injectType: 'singleton' 会导致多个测试用例争抢同一个 <style></style> 标签。
立即学习“前端免费学习笔记（深入）”；
- Vite 测试时加
test.cssModules: { generateScopedName: '[name]__[local]___[hash:base64:5]'，和开发保持一致哈希逻辑 - Webpack 中禁用
style-loader，改用css-loader+to-string-loader，让样式变成字符串由测试代码按需注入 - CI中跑测试前执行
rm -rf node_modules/.vite，防止缓存的CSS模块ID复用导致哈希碰撞
真正麻烦的从来不是写断言，而是让浏览器在测试里“老实听话”——它不关心你是不是在跑单元测试，该忽略的@media还是忽略，该合并的style标签照样合并。多一层容器、少一个自动注入、每次测试后手动清理document.styleSheets，比指望框架自动隔离更可靠。
