如何不经过转译同时使用Jest和jest-dom，解决document未定义报错

ReferenceError: document is not defined 报错是因为Jest默认运行在Node.js环境中，原生没有浏览器提供的document、window等DOM API。@testing-library/jest-dom仅提供DOM相关的测试断言能力，本身不会模拟浏览器DOM环境。

第一步：安装DOM模拟环境依赖 #

Jest 28及以上版本不再默认内置jsdom DOM模拟环境，需要手动安装对应依赖：

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

注意：如果你使用的是Jest 27及更早版本，jsdom是默认内置依赖，无需额外安装，直接执行下一步配置即可。

第二步：配置Jest使用jsdom环境 #

两种配置方式二选一即可：

方式1：单文件生效（仅给需要DOM环境的测试文件配置） #

在你的myApp.test.js文件最顶部添加环境声明注释，修改后代码如下：

/**
 * @jest-environment jsdom
 */
require("@testing-library/jest-dom");
document.createElement("div");

方式2：全局生效（所有测试文件默认使用jsdom环境） #

在项目根目录创建/修改jest.config.js配置文件，添加环境配置：

module.exports = {
  testEnvironment: "jsdom",
  // 其余原有配置保持不变
};

配置完成后重新执行npm test即可正常运行测试，不会再报document未定义的错误，且全程不需要额外配置代码转译规则，符合你的使用要求。

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