使用testing-library测试Vue组件时SFC scoped样式未生效导致可见性测试失败

你遇到的现象本质是测试运行环境没有正确加载SFC的scoped样式编译产物，和组件本身的渲染逻辑无关——DOM结构输出完全符合预期，只是缺了scoped样式绑定的data-v-*作用域标识、对应的CSS规则也没有被注入到jsdom环境中，原本设置了display: none的元素自然会被判定为可见。

• 优先检查测试运行器的SFC编译配置
  • 使用Vitest作为测试运行器时，首先检查vitest.config.ts中关联的@vitejs/plugin-vue配置：如果配置中关闭了style: true开关，Vite在编译SFC时会直接丢弃所有scoped样式块，既不会给组件元素打上data-v-*标识，也不会将对应的CSS规则注入到测试环境。
  • 使用传统Jest作为测试运行器时，核对jest.config.js中的transform规则，确认vue-jest的版本和项目的Vue主版本完全匹配——Vue3项目错用适配Vue2的vue-jest版本，是最常见的“样式全丢”诱因。
  • 排查是否手动添加了跳过CSS编译的配置：如果为了提速在配置中写了css: false类的规则，会直接跳过所有CSS的编译处理，刚好匹配你现在看到的现象。
• 核对测试入口的样式加载逻辑
  • 确认测试运行的依赖加载链路和业务代码一致：如果项目将公共SCSS样式单独拆分为独立文件在入口全局引入，要检查测试入口文件是否同步引入了这些公共样式；但要明确，scoped样式是SFC内部代码块的一部分，只要SFC编译逻辑正确，就算不单独引入全局样式，也不会丢失data-v-*标识——如果连标识都缺失，直接回到上一步检查编译配置即可。
  • 排查是否在测试配置中误将样式文件导入做了空mock：很多项目的初始测试模板会默认将.scss/.css后缀的导入规则mock为空对象，用来跳过样式加载提速，这个规则会直接拦截所有样式的注入，需要删除对应mock规则才能恢复样式加载。
• 确认可见性断言的依赖配置
  • 就算样式已经正确注入到jsdom，也要确认是否在测试入口中引入了@testing-library/jest-dom的全局断言扩展：如果缺少这个扩展，你写的toBeVisible类断言根本不会读取元素的计算样式，只会判断元素是否存在于DOM树中，自然会把隐藏元素误判为可见。
  • 明确jsdom的样式计算边界：scoped样式编译完成后的选择器结构为类名匹配加data-v-*属性匹配，只要元素上的属性值和CSS选择器中的值一致，jsdom就能正确匹配对应的规则。你debug时看到DOM连data-v-*标识都没有，就说明问题出在编译阶段，不是jsdom的计算能力问题。
• 常见踩坑提示
  • 如果你的测试场景不需要校验样式驱动的可见性，也可以不加载CSS，直接通过组件的传入参数判断目标元素是否被正常渲染即可；但如果测试目标本身就是样式带来的可见性变化，就必须打通完整的样式编译注入链路，否则断言的逻辑基础不存在。

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