Next.js配置ts-jest+jest-dom时toBeInTheDocument不存在如何解决？

解决方案 #

• 修正依赖位置
  @types/testing-library__jest-dom是类型定义包，你当前将它放在了生产依赖dependencies下，需要移动到开发依赖devDependencies中。如果你的@testing-library/jest-dom版本≥5.16.0，官方已经内置了类型定义，可以直接卸载@types/testing-library__jest-dom避免类型冲突。
• 移除测试文件中自定义的expect导入
  你在Calculator.spec.tsx中从@jest/globals手动导入了原生Jest的expect对象，这个对象没有被jest-dom的扩展匹配器覆盖，是引发类型报错的核心原因。直接删除测试文件中的import { expect, test } from '@jest/globals'这行代码即可，Jest运行时会自动注入已经被扩展后的全局expect、test等方法。
• 调整jest-dom导入写法
  将setupTests.ts中的导入语句改为全量导入：

  import '@testing-library/jest-dom'
  

  新版本jest-dom不需要指定/extend-expect后缀，该写法兼容性更强。
• 补全测试专用tsconfig的类型配置
  在tsconfig.jest.json的compilerOptions中显式指定需要加载的类型，避免类型继承丢失：

  {
    "extends": "./tsconfig.json",
    "compilerOptions": {
      "jsx": "react-jsx",
      "types": ["jest", "@testing-library/jest-dom"]
    }
  }
  

• 清理缓存重试
  所有配置修改完成后，执行npx jest --clearCache清理Jest本地缓存，再重新运行测试即可生效。

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