回归测试核心是比对css编译产物哈希值或结构快照，而非人工验视外观；应使用jest+css-snapshot直接断言scss输出字符串，并在ci中严格配置stylelint-selector-bem-pattern三项参数确保bem结构合法。
回归测试不是测样式“看起来对不对”，而是测 CSS 输出是否被意外修改——核心是比对编译产物的哈希值或结构快照，而不是人工点开浏览器看按钮颜色。
用 jest + css-snapshot 捕获 SCSS 编译结果
直接测生成的 CSS 字符串，比测 DOM 渲染更稳定、更快、不依赖浏览器环境。
- 安装依赖：
npm install --save-dev jest jest-css-snapshot - 在测试文件中 import 原始 SCSS 文件（需配置 Jest 支持
.scss导入）：用jest-transform-css或自定义 transformer 把@import和变量解析后吐出纯 CSS 字符串 - 关键不是渲染，而是断言：
expect(cssOutput).toMatchCssSnapshot()—— 它会把每次输出存为__snapshots__/xxx.css.snap，CI 中一旦哈希变化就报错 - 别把
node_modules或dist/目录加进测试路径，否则 Sass 版本升级导致空格/注释变动也会触发误报
stylelint-selector-bem-pattern 必须在 CI 里跑，且配全三项参数
类名结构出错不会让编译失败，但会让回归测试里出现意料外的样式覆盖 —— 比如 .card__title--large 被写成 .card-title--large，CSS 还能跑，但 BEM 约定已破，后续改 .card__title 样式时会漏掉这个非法节点。
- 缺
componentName: '[a-z][a-z0-9-]*'→ 放行.Card，破坏小写约定 - 缺
ignoreSelectors: [/^\..+:(hover|focus|active|disabled)$/]→ 把.btn:hover当非法选择器拦掉，导致开发者绕过规则写内联style - 没设
preset: 'bem'→ 只校验命名格式，不校验三层结构（block__element--modifier），.user-card__avatar--large--dark这种双 modifier 就逃过去了
避免把 HTML 结构和 CSS 绑死做快照测试
HTML 层面的快照（比如用 jest-dom 的 toHaveClass）容易因组件 props 变动而失效，不是回归测试 CSS 的合理方式。
- 真正该锁定的是：SCSS 输入 → CSS 输出 → 类名组合规则 → 最终应用到元素上的 class 列表
- 推荐拆解验证：用
html-validate检查模板中 class 是否符合 BEM；用jest测useButtonClasses({ size: 'lg' })返回值是否为{ root: 'button button--lg', icon: 'button__icon' } - 禁止在测试里写
expect(el.className).toBe('button button--lg')—— 一旦组件内部重构 class 生成逻辑，测试就崩，但样式可能完全没变
最常被忽略的点：回归测试必须运行在与生产一致的 Sass 编译环境下。Dart Sass 5.0.0 和 5.1.0 对 @use 的模块解析顺序有细微差异，CI 里用错版本会导致 CSS 输出字节级不同，快照就白写了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
