测试中组件事件处理函数无法查询DOM该如何解决？

导致该问题的常见原因有三类：

• 测试环境未正确配置DOM模拟能力。Jest 28及更高版本默认不再内置jsdom环境，未手动配置的情况下测试运行在纯Node环境中，document对象为不完全模拟状态，无法正常查询渲染生成的DOM节点。
• 组件渲染容器未挂载到全局document。React Testing Library默认会将渲染容器自动挂载到document.body上，但若自定义render方法的container参数，传入了未被插入到document的游离DOM节点，全局document的查询方法无法检索到该节点下的内容。
• React版本与测试库不兼容。若使用React 18，而@testing-library/react版本低于13，旧版render方法未适配React 18的异步根节点渲染逻辑，会导致触发点击事件时DOM还未正式挂载到document上。

• 配置jsdom测试环境：先安装依赖npm install --save-dev jsdom，随后在jest.config.js中添加配置项testEnvironment: "jsdom"；也可以在单个测试文件顶部添加注释/** @jest-environment jsdom */单独指定测试环境。
• 使用默认渲染配置：无需手动传入自定义container参数，使用React Testing Library默认的render逻辑即可，其会自动将渲染容器挂载到document.body，保证全局document的查询方法可正常检索节点。
• 升级测试库适配React 18：若使用React 18，将@testing-library/react升级到13.0.0及以上版本，适配新版React的渲染逻辑。
• 优化查询方式（最佳实践）：测试中尽量避免直接调用document的原生查询方法，改用React Testing Library提供的screen对象查询方法，比如screen.getAllByRole('div')，这类方法直接在渲染容器内检索，不受容器挂载位置影响，也更符合用户视角的测试原则。

内容的提问来源于stack exchange，提问作者nfelger