React+Jest+Testing Library用findByAltText等查询时报createEvent为空错误

这个报错是测试用例执行完成、测试环境销毁document对象后，仍有未执行完的React异步逻辑（包括findBy系列异步查询的回调、组件内部的异步状态更新）尝试操作DOM触发的，此时document已被置为null，调用document.createEvent自然抛出空指针错误。

• 所有findBy系列查询必须加await，同时测试函数要声明async
  findBy系列方法返回的是Promise对象，没有await的情况下测试用例会直接执行完成、销毁测试环境，后续异步回调执行时就会触发报错。
  错误写法示例：

  test('测试图片加载', () => {
    render(<Page />)
    const img = screen.findByAltText('banner')
    expect(img).toBeInTheDocument()
  })
  

  正确写法示例：

  test('测试图片加载', async () => {
    render(<Page />)
    const img = await screen.findByAltText('banner')
    expect(img).toBeInTheDocument()
  })
  

• 等待组件所有异步更新完成再结束测试
  如果组件内部有异步逻辑（比如请求接口后更新状态），可以用waitFor方法等待对应的DOM/状态出现后再结束测试，避免异步更新在测试销毁后才执行。
• 补充组件异步逻辑的清理逻辑
  在组件的useEffect中返回清理函数，组件卸载时终止未完成的请求、清除定时器/延时器，避免组件卸载后仍执行状态更新操作。
• 确认Jest测试环境配置正确
  React DOM测试需要jsdom模拟浏览器环境，需在jest.config.js中配置testEnvironment: 'jsdom'，Jest 28及以上版本需要额外安装jest-environment-jsdom依赖。

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