应结合jest与playwright/puppeteer在真实浏览器中测试document.compatmode等渲染模式状态及computed style，因jsdom无法模拟quirks模式；需断言css计算值、布局尺寸和dom状态而非仅html结构。
直接结论：不测渲染结果像素，而测 DOM 结构 + 样式计算值 + 渲染模式状态，才是多引擎下真正可落地的单元测试路径。
怎么用 Jest 捕获 document.compatMode 和渲染模式
Chrome、Firefox、Safari 对 document.compatMode 的返回值一致（CSS1Compat / BackCompat），但 Jest 默认环境是 JSDOM，它始终返回 CSS1Compat，且不模拟怪异模式行为。这意味着仅靠 Jest 无法覆盖“DOCTYPE 被 BOM 破坏导致 Quirks”的真实风险。
- 必须在真实浏览器中运行部分关键断言——用
jest-puppeteer或playwright-test启动 Chromium/Firefox 实例 - 在 Puppeteer 环境中，可主动注入带 BOM 的 HTML：
await page.setContent('\uFEFF<div>test</div>')，再执行await page.evaluate(() => document.compatMode)验证是否为BackCompat - JSDOM 测试里只能 mock 掉兼容性逻辑（比如封装一个
getRenderMode()工具函数），但不能替代真机验证
为什么不能对 <header></header> 等语义标签只测 class 名或 innerHTML
因为不同内核对未声明 display 的 HTML5 标签，解析后生成的 computed style 完全不同：Firefox 可能给 <nav></nav> 加 padding: 0.67em 0，Safari 早期版本甚至当它是 inline，导致 offsetHeight 为 0。
- 单元测试必须调用
getComputedStyle(element)并断言关键属性，例如：expect(computed.display).toBe('block')、expect(computed.marginTop).toBe('0px') - 避免只测
element.tagName === 'HEADER'—— 这在 IE8 下永远为 true，但元素根本没被创建（DOM 节点为空） - 若需兼容 IE8–9，测试中应显式检查
typeof document.createElement('header').getAttribute === 'function'，再决定是否加载html5shiv.min.js
Flexbox 塌陷类问题如何写可复现的回归测试
Safari 14–15 中 flex 容器内子项未设 min-width 时，会因宽度计算错误导致内容塌陷——这种 bug 不会在 Chrome 中触发，但 Jest + JSDOM 也完全无法模拟。
- 回归测试文件必须命名为
regression.safari-14-flex-collapse.test.tsx，并标注 target engine - 测试 HTML 片段要包含典型塌陷结构：
<div style="display:flex"><div style="flex:1">text</div></div> - 用 Playwright 在 Safari 15 环境中执行：
await expect(locator).toHaveCSS('min-width', 'auto')（实际会是0px），再验证修复后是否为min-content或具体数值 - CI 中需明确指定浏览器版本（如
playwright install safari-15），不能只写 “safari”
真正难测的不是“样式写了没”，而是“浏览器怎么解释你写的样式”。所有断言都要锚定在可测量的输出上：computed style、layout 尺寸、DOM 节点存在性、document.compatMode 值——而不是期望某段 HTML “看起来一样”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
