为jQuery多日期选择器插件写单元测试时遇jQuery未定义错误

问题分析 #

你的多日期选择器插件代码逻辑是：非AMD环境下直接调用factory(jQuery)，依赖全局的jQuery变量。但当前测试代码中，插件导入在全局jQuery挂载之前执行——插件运行时找不到全局jQuery，因此报错。

解决步骤 #

1. 提前挂载全局jQuery：在导入插件前，把jQuery挂载到window和global对象，确保插件执行时能读取到全局变量。
2. 调整导入顺序：保证jQuery、jQuery UI先完成导入和全局挂载，再导入多日期选择器插件。

修改后的测试代码 #

import 'jsdom-global/register.js';  // 初始化JSDOM
import $ from 'jquery';  // 导入jQuery
import { expect } from 'chai';
import 'jquery-ui/ui/widgets/datepicker.js';  // 导入jQuery UI日期选择器

// 提前挂载全局变量，再导入插件
global.$ = global.jQuery = $;
window.$ = window.jQuery = $;

import '../jquery-ui.multidatespicker.js';  // 此时插件能找到全局jQuery

describe('multiDatesPicker Initialization', function() {
    it('should initialize the multi-date picker correctly', function() {
        const $input = $('<input>');
        $('body').append($input);
        $input.multiDatesPicker();

        expect($input.hasClass('hasDatepicker')).to.be.true;
    });
});

额外优化（可选） #

如果插件依赖完整的jquery-ui-dist而非单独的datepicker模块，可调整jQuery UI的导入路径：

import 'jquery-ui-dist/jquery-ui.js';

替换原有的import 'jquery-ui/ui/widgets/datepicker.js';，确保插件能获取完整的jQuery UI环境。

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