BEM类名断言是最稳定可复用的CSS自动化测试方式，因其不依赖DOM结构、computedStyle或构建压缩，仅需类名存在即可靠；应直接用classList.contains验证Modifier，避免getComputedStyle等不稳定方式。
直接用 BEM 类名做断言，是目前最稳定、最可复用的 CSS 自动化测试方式。它不依赖 DOM 结构、不依赖 computedStyle 解析、不依赖构建产物是否压缩——只要类名存在且被正确添加，测试就可靠。
为什么 classList.contains 是比 getComputedStyle 更可靠的断言依据
运行时验证 Modifier 是否生效，classList.contains('button--disabled') 是确定性判断；而 getComputedStyle(el).opacity 会因多种原因返回非预期值：
- 浏览器可能压缩声明值（如
opacity: 0.5→opacity: .5），正则匹配易失败 - CSS 变量未被 JS 设置时，
getComputedStyle返回空字符串或默认值，和真实渲染不一致 - 继承、层叠、媒体查询激活状态都会干扰
computedStyle的稳定性，CI 中复现率低
如何让 Jest 或 Cypress 断言精准命中 BEM 类名
BEM 类名本身具备强语义和唯一性，测试时应直接利用这点，而不是绕路查样式效果：
- Jest + RTL：用
screen.getByRole('button', { name: /submit/ }).classList.contains('button--disabled') - Cypress：用
cy.get('button').should('have.class', 'button--disabled')，避免.should('have.css', 'opacity', '0.5') - 快照测试中，
expect(container).toMatchSnapshot()能天然捕获button--primary button--large这类组合，无需额外逻辑
PostCSS 插件如何在编译阶段卡住不可测的写法
很多“看似能测”的 BEM 写法，实际破坏了测试前提——比如修饰符叠加、后代选择器退化。这类问题必须在代码提交前拦截：
-
postcss-bem-linter可拒绝.button--primary--disabled（多--）、.modal--open .modal__content（含空格，退化为后代选择器） - 规则需显式配置
ignoreSelectors: ["/^\..+:(hover|focus)/"]，否则伪类会被误报 - 禁止
.card__title strong这类依赖标签的选择器——它让card__title--highlighted在不同 HTML 结构下行为不一致，根本无法构造稳定断言
真正难测的不是单个类名，而是 Modifier 组合互斥性
测试 button--disabled 单独存在没问题，但当它和 is-loading 同时加在元素上时，样式是否按预期覆盖？这需要显式构造多状态组合：
- 不要只测
button--disabled，要测button--disabled is-loading和button--primary button--disabled - Modifier 之间不能有隐式依赖（比如
button--disabled里写&:hover { opacity: 1 }），否则组合态行为不可预测 - 所有组合态都应在组件文档或 Storybook 中显式声明，并同步覆盖到测试用例里
类名是否拼对只是第一关；真正的复杂点在于 Modifier 设计本身是否正交、是否可自由组合——这决定了你写十个测试用例，还是得写一百个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
