测试中queryselector变慢主因是dom树过深或节点过多，而非选择器长度；jsdom从右往左匹配，500个6层嵌套项会引发数百次回溯，且测试框架常挂载冗余dom。
为什么测试中 querySelector 匹配变慢不是因为选择器写得长
测试环境里 querySelector 执行变慢，通常不是因为你写了 .container > .list-item .title 这种结构，而是因为 DOM 树本身太深或节点太多。JSDOM（多数 Node 环境测试用）和真实浏览器一样，从右往左匹配：先找所有 .title，再逐层向上验证父级。如果页面渲染了 500 个列表项，每个嵌套 6 层 div，那每次匹配都要回溯数百次路径——这在测试中反复调用时会明显拖累执行时间。
更隐蔽的问题是：测试框架（如 Jest + Testing Library）默认挂载完整组件树，哪怕你只测一个按钮，也可能带入整块冗余 DOM，比如被注释掉的旧模块、未清理的 v-if 或 *ngIf 分支残留节点。
- 用
screen.debug()或container.innerHTML打印实际挂载的 HTML，检查是否有意外的包裹层或空节点 - 避免在测试 setup 中直接渲染高阶组件（如 Layout、AuthProvider），改用
render(<component></component>, { wrapper: null })脱离上下文 - JSDOM 不支持
CSS.supports()等特性，某些 CSS-in-JS 库（如 Emotion）可能 fallback 到内联 style，导致生成大量无语义的style属性节点，增加树宽
如何让 getByRole / findByText 在深层 DOM 中不卡住
getByRole 和 findByText 看似语义化，但底层仍依赖 querySelectorAll 遍历。当 DOM 深度 > 5 层且文本节点超过 1000 个时，findByText('Submit') 可能触发全树扫描，尤其在异步等待中反复重试。
- 给目标元素加明确的
data-testid="submit-button"，测试中优先用getByTestId—— 它走的是属性索引，比文本匹配快一个数量级 - 避免在循环中调用
getByText；若需断言多个文本，先用container.querySelectorAll('[role="button"]')获取集合，再遍历textContent - 测试中禁用动画：Jest 配置里加
testEnvironmentOptions: { url: 'http://localhost' }并设置CSS.supports = () => true，防止某些库因检测失败而降级为 JS 动画，间接增加 DOM 节点
测试 DOM 快照体积爆炸的真正原因
运行 expect(container).toMatchSnapshot() 时快照文件动辄几百 KB，不只是因为内容多，更常因 DOM 中混入了动态属性：React 的 data-reactroot、Vue 的 data-v-xxxx、或者测试中 mock 的随机 ID、时间戳、key 值。这些字段让每次快照都不同，还拖慢序列化速度。
- 用
jest-dom的toHaveTextContent替代全量快照，聚焦可预期的输出 - 若必须用快照，提前清理：在
render后执行container.querySelectorAll('[data-testid],[data-cy]').forEach(el => el.removeAttribute('data-testid')) - 避免在组件内部生成不可控的 DOM 属性，比如用
Math.random()生成id，改用固定值或 props 注入
为什么 cleanup() 后仍有 DOM 节点残留影响下个测试
afterEach(cleanup) 只清空 document.body 下的节点，但不会清除 document.head 插入的 style、link，也不会回收被 requestAnimationFrame 持有的回调引用。残留的 style 规则会让后续测试的 getComputedStyle 返回错误值；未清除的动画帧可能在下一个测试中突然触发 DOM 修改，导致 act() 警告或断言失败。
- 在
beforeEach中手动清空 head：document.head.innerHTML = '' - 测试中避免直接调用
setTimeout或setInterval，改用jest.useFakeTimers()并在afterEach调用jest.runOnlyPendingTimers() - 使用
@testing-library/reactv14+ 时，确保cleanup是从@testing-library/react导入的，而非旧版react-testing-library，后者不处理 Shadow DOM 和微任务队列
div 包裹，可能让 20 个测试用例的平均执行时间下降 120ms。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
