Webpack5+TypeScript环境下Jest提示toBeInTheDocument类型不存在如何解决

该报错本质是TypeScript未正确加载@testing-library/jest-dom提供的扩展匹配器类型声明导致的编译错误，可按以下步骤逐一排查修复：

• 移除测试文件重复导入
  你已经在全局setupTests.ts中引入了jest-dom扩展，无需在单个测试用例文件中重复导入，删除test.spec.tsx中以下两行代码：

  import "@testing-library/jest-dom/extend-expect";
  import "@testing-library/jest-dom";
  

• 修正tsconfig.json配置
  在compilerOptions中显式指定需要加载的类型声明包，同时确保setupTests.ts被包含在编译范围内：

  {
    "compilerOptions": {
      // 原有配置保留，新增以下字段
      "types": ["jest", "@testing-library/jest-dom", "node"]
    },
    "include": ["**/*.ts", "**/*.tsx", "**/*.jsx", "**/*.js", "setupTests.ts"],
    "exclude": ["dist", "node_modules"]
  }
  

• 适配Yarn 3的依赖解析逻辑
  Yarn 3默认的PnP依赖管理模式会导致部分类型声明无法被正常识别，在项目根目录新建.yarnrc.yml文件，添加以下配置后重新执行yarn install：

  nodeLinker: node-modules
  

• 校验setupTests.ts路径
  确认你的setupTests.ts文件存放在项目根目录，如果放在src目录下，需要将jest.config.js中的setupFilesAfterEnv配置修改为：

  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  

• （可选）修复ESLint误报问题
  如果ESLint提示screen、test等全局变量未定义，在你的.eslintrc配置文件中添加以下字段：

  {
    "env": {
      "jest": true,
      "browser": true
    },
    "extends": [
      // 原有配置保留，新增以下规则
      "plugin:jest/recommended"
    ]
  }
  

配置修改完成后执行yarn test即可验证问题是否解决。

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