非CRA搭建的React项目使用react-testing-library报document未定义错误如何解决

该报错的核心原因是Jest 27及以上版本默认使用node作为测试环境，不存在浏览器提供的document、window等DOM全局变量，而React Testing Library渲染组件必须依赖DOM环境，因此触发错误。修复步骤如下：

• 步骤1：安装jsdom依赖
  Jest 27起不再内置jsdom，需要手动安装：

npm install --save-dev jest-environment-jsdom

• 步骤2：配置Jest测试环境，任选以下一种方式即可：

  1. package.json配置：在package.json根层级新增jest配置项

  {
    // 保留原有package.json的其他配置，新增以下内容
    "jest": {
      "testEnvironment": "jsdom"
    }
  }
  

  2. 单独配置文件：在项目根目录新建jest.config.js，写入内容：

  module.exports = {
    testEnvironment: "jsdom"
  }
  

• 步骤3：静态资源兼容配置（可选，若你的组件引入了样式、图片等静态资源建议配置）
  先安装依赖：

npm install --save-dev identity-obj-proxy jest-transform-stub

更新Jest配置，新增规则：

"jest": {
  "testEnvironment": "jsdom",
  "moduleNameMapper": {
    "\\.(css|scss|sass)$": "identity-obj-proxy",
    "\\.(svg|png|jpg|jpeg|woff|woff2|ttf|eot)$": "jest-transform-stub"
  }
}

配置完成后重新执行npm run test即可正常运行测试。

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