Jest测试报错：TypeError: jquery.extend is not a function

原因及修复方法 #

1. 先检查模块里的jQuery调用是否写错了 #

模块里如果写的是jquery.extend，十有八九是语法错误——jQuery的extend方法是挂在$或者jQuery全局对象上的，不是直接调用jquery.extend。把代码改成下面这样：

// 正确写法二选一
$.extend({}, 目标对象, 源对象);
// 或者
jQuery.extend({}, 目标对象, 源对象);

2. 给Jest测试环境正确挂载jQuery #

虽然装了jsdom，但默认情况下jQuery不会自动绑定到测试环境的window对象上，得手动初始化：

• 方法一：在单个测试文件顶部加初始化代码

import { JSDOM } from 'jsdom';
import jquery from 'jquery';

// 创建模拟DOM环境
const dom = new JSDOM('<!doctype html><html><body></body></html>');
// 挂载全局对象
global.window = dom.window;
global.document = dom.window.document;
// 让jQuery适配当前DOM环境
const $ = jquery(global.window);
global.$ = $;
global.jQuery = $;

• 方法二：全局配置所有测试文件
  在项目根目录创建jest.setup.js，写入上面的初始化代码，然后修改jest.config.js：

module.exports = {
  testEnvironment: 'jsdom',
  // 指定初始化文件，所有测试前都会执行
  setupFilesAfterEnv: ['./jest.setup.js'],
};

3. 检查依赖版本是否兼容 #

如果上面两步都没用，可能是版本不匹配。比如新版jsdom和旧版jQuery可能有冲突，建议锁定兼容版本：
在package.json里指定：

"dependencies": {
  "jquery": "^3.6.0"
},
"devDependencies": {
  "jest": "^29.0.0",
  "jsdom": "^20.0.0",
  "jest-environment-jsdom": "^29.0.0"
}

然后重新跑yarn install更新依赖。

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