在Node.js中模拟全局jQuery对象时出现TypeError的原因咨询

我在Node.js环境中用JSDOM模拟浏览器环境测试客户端jQuery代码时遇到了一个奇怪的问题：两种类似的初始化方式，第一种正常，第二种却报错TypeError: $ is not a function，想请教原因。

以下是两种场景的终端输出：

场景1（正常工作） #

$ nvm exec 22 node
Running node v22.15.1 (npm v10.9.2)
Welcome to Node.js v22.15.1.
Type ".help" for more information.
> const { JSDOM } = require('jsdom');
undefined
> const dom = new JSDOM("");
undefined
> var $ = require('jquery')(dom.window);
undefined
> $.extend
[Function (anonymous)]
> $(dom.window.document)
jQuery { '0': Document { ... }, length: 1 }

场景2（报错） #

$ nvm exec 22 node
Running node v22.15.1 (npm v10.9.2)
Welcome to Node.js v22.15.1.
Type ".help" for more information.
> const { JSDOM } = require('jsdom');
undefined
> function set_up_globals() {
... // Set up a mock document:
... const dom = new JSDOM("");
... global.window = dom.window;
... global.document = dom.window.document;
... global.navigator = dom.window.navigator;
... global.HTMLElement = dom.window.HTMLElement;
... global.$ = require('jquery')(dom.window);
... }
undefined
> set_up_globals();
undefined
> $.extend
[Function (anonymous)]
> $(document)
Uncaught TypeError: $ is not a function

我完全搞不懂为什么突然会出现这个类型错误。我的使用场景是：我有一个使用jQuery的客户端JS文件，想在Node.js脚本中测试它的行为，所以需要模拟全局的jQuery对象。

哇，这个问题真的有点绕，我来帮你拆解一下！首先看你场景2的输出，有个非常矛盾的点：你先输入$.extend能正常拿到jQuery的extend函数，说明$确实是存在的jQuery对象，但紧接着调用$(document)就报错$ is not a function——这看起来完全不合理，对吧？

罪魁祸首：Node.js REPL的特殊变量$ #

其实问题出在Node.js REPL的一个隐藏特性上：REPL会把每次执行的表达式结果自动赋值给特殊变量$。我们一步步复盘场景2的执行流程：

1. 你调用set_up_globals()，返回undefined，此时REPL的特殊变量$是undefined，而global.$是你初始化的jQuery对象。
2. 你输入$.extend，这个表达式会读取global.$.extend，返回extend函数。此时REPL会把这个extend函数覆盖到它自己的特殊变量$上！
3. 当你输入$(document)的时候，REPL里的$已经不是global.$（jQuery函数）了，而是上一步得到的extend函数！

那为什么报错是$ is not a function呢？其实是因为extend函数的调用逻辑和jQuery选择器函数完全不同，它不是用来接收DOM节点作为参数的，而且当你直接调用它时，内部的上下文绑定会出问题，REPL简化了错误提示，才出现了这个看似矛盾的报错。

验证猜想的小技巧 #

你可以在场景2中，明确使用global.$来调用，看看会不会正常：

> global.$(document)
// 应该会返回正常的jQuery对象，就像场景1那样

或者，在调用$.extend之后，先把$重新指向global.$：

> $.extend
[Function (anonymous)]
> $ = global.$;
> $(document)
// 现在应该正常了

针对你的测试场景的解决方案 #

不过，你是要测试客户端JS代码，肯定不会在REPL里手动跑，而是写在测试脚本里。这时候要注意几个点：

1. 尽量不要手动挂载global对象，推荐用jsdom-global这样的包自动挂载所有浏览器全局变量，它会帮你处理好细节，避免手动挂载的遗漏或绑定问题。
2. 如果坚持手动初始化，一定要在加载客户端JS代码之前完成所有全局变量的设置，确保客户端代码能正确读取到$和document等对象。
3. 把测试逻辑写在.js文件中执行，避开REPL特殊变量的坑。

举个简单的测试脚本例子：

const { JSDOM } = require('jsdom');
const fs = require('fs');

// 初始化JSDOM环境
const dom = new JSDOM("");
global.window = dom.window;
global.document = dom.window.document;
global.$ = require('jquery')(dom.window);

// 加载并执行你的客户端JS代码（假设是client.js）
const clientCode = fs.readFileSync('./client.js', 'utf8');
dom.window.eval(clientCode);

// 测试代码示例
console.log($(document).length); // 应该返回1，不会报错

这样写就可以正常模拟浏览器环境，测试你的jQuery代码啦！

内容来源于stack exchange