bem 测试选择器应直接使用 .block__element--modifier，因其显式声明组件归属与状态，比 dom 路径或标签名更稳定可靠；但需确保类名书写正确、未被动态覆盖、未跨 block 滥用。
直接用 .block__element--modifier 写测试选择器，比靠 DOM 路径或标签名可靠得多——前提是类名本身没写错、没被 JS 动态覆盖、没跨 block 滥用。
为什么 .card__header--large 比 div > h2:first-child 更适合测试
BEM 类名是显式契约，不是字符串巧合。它声明了“这是 card 组件的 header 元素，且当前处于 large 状态”。测试时直接选 .card__header--large，就锁定了节点归属与状态，不依赖父容器是否换了、子元素是否增删、甚至 <h2></h2> 是否被替换成 <div role="heading">。
<p>常见错误现象：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a>
<p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>DOM 结构微调（比如加个 wrapper）导致 <code>div > h2:first-child 断链，测试全挂
.title 样式被改，意外影响所有 .card .title，但没人意识到是测试路径太松散.header .logo 匹配到 footer 里的同名元素，测试误判实操建议：
- 只对真实存在的 BEM 类名断言，不拼接、不推导 ——
.search-form__input--disabled必须和.search-form__input同时出现在 classList 中 - 禁止用
getByRole('heading', { level: 2 })替代getByClassName('card__header')，除非你明确放弃语义归属 - 搜索定位时，直接 grep
card__header，就能找到 HTML、CSS、JS、测试全部相关代码，不会漏掉隐藏在.sidebar .card h2里的老写法
button__icon--loading 能不能单独测？
不能。BEM 的层级约束在测试里同样生效：修饰符（--loading）必须依附于其宿主存在，否则说明 JS 逻辑有缺陷。
常见错误现象：
- 测试写了
expect(screen.getByClassName('button__icon--loading')).toBeInTheDocument()，但实际渲染时.button__icon类被 JS 清空，只剩--loading—— 这不是样式问题，是 class 操作 bug - 团队误以为
--disabled是独立状态，结果.input--disabled在没有.input的情况下出现，导致样式失效却无人察觉
实操建议：
- 断言修饰符时，同步检查基础类是否存在：
const el = screen.getByClassName('button__icon');+expect(el).toHaveClass('button__icon--loading') - 禁止写
getByClassName('button--primary__icon')—— 这种命名本身已违反 BEM，测试发现它应先修复代码，而非绕过 - 若图标真有独立状态（如旋转），才用
button__icon--loading；若只是按钮整体 loading 时图标变灰，则只需button--loading，由 CSS 控制内部颜色
要不要用 getByTestId 替代 getByClassName？
取决于类名是否稳定。如果组件严格遵循 BEM 且无运行时拼接，getByClassName('card__body') 更轻量、更直观；若存在 className={`card__body ${isExpanded ? 'card__body--expanded' : ''}`} 这类拼接，就得用 data-testid。
实操建议：
- 同一组件内绝不混用：
data-testid="card-body"和class="card__body"同时存在，会导致后续有人删 class 却忘了删 testid - 即使用了
data-testid，命名仍按 BEM 逻辑：值应为block__element格式（如card__footer），保持语义一致 - CI 阶段可加校验：当检测到
data-testid值不含双下划线（如"header"），报 warning；当检测到class名含__但未匹配任何data-testid，也报 warning
最易被忽略的一点：BEM 测试的有效性完全依赖类名书写正确性。工具链（如 stylelint-selector-bem-pattern）必须开启且禁用自动修复 —— 因为 .user-card__avatar--dark 写成 .user-card__avatar-dark 看似只差一个字符，但语义已断裂，测试会误判状态，而浏览器根本不报错。
