导入@testing-library/jest-dom报expect.extend不是函数、toBeDisabled无效如何解决

• 首先确认jest是否正确加载了你的setupTests.js配置文件
  • 如果是自研jest配置项目，需要在jest.config.js中添加如下配置，确保jest会在运行测试前执行该导入文件：

    module.exports = {
      // 其他配置项
      setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'] // 路径替换为你实际的setupTests.js存放路径
    }
    

  • 如果是Create React App脚手架项目，需确认setupTests.js存放在src根目录下，否则不会被自动加载。
• 排查是否存在jest与chai的expect冲突
  报错中明确提到了Chai，说明你当前调用的expect是Chai提供的实例，而@testing-library/jest-dom的匹配器默认仅挂载到Jest自带的全局expect上，两种解决方案：
  1. 移除测试代码中Chai的expect引入，使用Jest自带的全局expect
  2. 若需要保留Chai使用，安装chai-jest-dom依赖，在setupTests.js中添加如下代码将匹配器挂载到Chai上：

  import chai from 'chai';
  import chaiJestDom from 'chai-jest-dom';
  
  chai.use(chaiJestDom);
  

• 验证版本兼容性
  若你使用的@testing-library/jest-dom为v6及以上版本，需要Jest版本≥28才能正常兼容，若你的Jest版本低于28，可降级@testing-library/jest-dom到v5版本使用。
• 临时排查方法
  可以先在报错的测试文件顶部手动添加import '@testing-library/jest-dom'，如果测试可以正常运行，即可确定是setup配置文件未生效的问题，优先排查第一步的配置即可。

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