ReactJS项目引入react-owl-carousel导致Jest测试报错求助

问题原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'fn')错误，本质是react-owl-carousel依赖jQuery，但Jest测试环境没有全局暴露jQuery。虽然你在index.html中添加了jQuery的script标签，但Jest运行在Node.js环境中，不会加载浏览器端的HTML资源，所以依然找不到jQuery。

解决方案 #

方案1：在Jest测试环境中全局注入jQuery #

1. 先安装jQuery依赖（如果还没装）：

   npm install jquery --save-dev
   # 或者用yarn
   yarn add jquery -D
   

2. 配置Jest的初始化文件：

   • 如果项目里没有src/setupTests.js，新建一个并添加：

     import $ from 'jquery';
     global.$ = global.jQuery = $;
     

   • 在package.json中添加Jest配置（已有jest项则直接修改）：

     "jest": {
       "setupFiles": ["./src/setupTests.js"]
     }
     

   • 若项目使用独立的jest.config.js，则修改该文件：

     module.exports = {
       setupFiles: ['<rootDir>/src/setupTests.js']
     };
     

方案2：Mock react-owl-carousel组件（适合无需测试carousel功能的场景） #

如果测试不需要验证carousel的具体交互，只是想测试组件的其他部分，可以直接mock整个carousel组件，跳过真实依赖的加载逻辑。在App.test.js顶部添加：

jest.mock('react-owl-carousel', () => () => <div>Mocked Carousel</div>);

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