核心是捕获实际渲染结果并与预期结构做可维护、可追溯的比对；常用快照测试固化DOM字符串，或提取关键结构特征（如role、标签、属性）进行稳健断言，需注意jsdom能力边界及跨浏览器一致性。
测试组件渲染输出的 HTML 结构是否正确，核心是**捕获实际渲染结果，并与预期结构做可维护、可追溯的比对**。不能只靠肉眼检查或手动查 DOM，而要借助测试框架能力，在真实（或模拟）环境里运行组件、提取结构、断言一致性。
用快照测试固化结构预期
这是最常用也最轻量的方式，尤其适合 React、Vue 等声明式框架：
- 用 render（React Testing Library）或 mount/shallowMount（Vue Test Utils）挂载组件
- 从返回对象中获取容器节点（如
baseElement或html()方法） - 调用
expect(...).toMatchSnapshot()生成并保存首次快照 - 后续运行时自动比对：DOM 字符串是否变化；若有意变更，需手动更新快照（
jest -u）
快照本质是渲染后 DOM 的序列化字符串，例如：<div class="App"><button>添加</button></div>。它不验证行为，但能快速发现结构意外变动。
用结构断言代替字符串匹配
快照易误报（如时间戳、随机 ID），更稳健的做法是提取关键结构特征再断言：
立即学习“Java免费学习笔记（深入）”；
- 检查特定标签是否存在：
expect(screen.getByRole('button')).toBeInTheDocument() - 验证语义标签使用：
expect(document.querySelector('header')).not.toBeNull() - 断言嵌套关系或属性：
expect(screen.getByText('提交')).toHaveAttribute('type', 'submit') - 排除非法结构：
expect(document.querySelectorAll('p > div')).toHaveLength(0)
这类断言聚焦“结构契约”，不受无关文本或 class 变动影响，可读性和稳定性更高。
注意 jsdom 的能力边界
绝大多数单元测试跑在 jsdom（Node 环境的 DOM 模拟器）上，但它不支持真实浏览器行为：
-
:focus样式、IntersectionObserver、offsetHeight、图片自然尺寸等均不可靠 - 它适合验证「数据 → HTML 字符串」映射是否正确，不适合覆盖「用户点击 → 动画 → 滚动定位」这类链路
- 若结构依赖 CSS 布局（如 flex 换行、grid 轨道），jsdom 无法校验；此时需结合视觉回归工具（如 html-looks-like）或端到端测试
跨浏览器结构一致性需额外覆盖
HTML5 语义标签（<dialog>、<nav>）在旧浏览器中可能不被识别为有效 DOM 节点：
- 用
document.querySelectorAll('nav').length断言节点存在，而非只看样式是否生效 - 老 IE 需 html5shiv；Safari 对
display默认值处理不一致，应显式重置：nav { display: block; } - 自动化时可用 Selenium 执行 JS 获取各浏览器下
querySelectorAll结果，确认结构树构建一致
