如何在Vitest测试中为jQuery配置全局window对象

核心原因 #

jQuery在初始化阶段会直接检查全局作用域下的window和document对象，Vitest中如果全局对象挂载时机晚于jQuery的导入操作，就会触发Error: jQuery requires a window with a document错误。

解决方案步骤 #

1. 配置Vitest使用JSDOM环境 #

修改vitest.config.js，直接指定测试环境为jsdom，让Vitest自动注入window和document全局对象：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    // 启用jsdom环境，自动提供window、document等浏览器全局对象
    environment: 'jsdom',
    // 开启全局变量模式，无需手动导入vitest的API（可选）
    globals: true
  },
  // 保留原有的Common别名配置
  resolve: {
    alias: {
      '@Common': './path/to/common'
    }
  }
});

2. 移除测试文件中重复的JSDOM初始化 #

删除MyFooUsejq.test.js中手动创建JSDOM的代码，直接使用Vitest提供的全局对象：

import { describe, it, expect } from 'vitest';
import MyFooUsejq from './MyFooUsejq';

describe('MyFooUsejq', () => {
  it('should initialize correctly with jQuery', () => {
    const instance = new MyFooUsejq();
    expect(instance).toBeDefined();
    // 测试jQuery相关逻辑
    expect($).toBeDefined();
  });
});

3. 验证执行命令 #

运行原测试命令即可：

yarn vitest --config=vitest.config.js MyFooUsejq.test.js

特殊场景处理（手动控制全局对象） #

如果需要自定义JSDOM的配置，可创建vitest.setup.js文件并在配置中引入：

// vitest.setup.js
import { JSDOM } from 'jsdom';

const dom = new JSDOM('<!doctype html><html><body></body></html>', {
  url: 'http://localhost:3000' // 自定义页面URL
});

// 挂载全局对象
global.window = dom.window;
global.document = dom.window.document;
global.navigator = dom.window.navigator;

然后在vitest.config.js中添加setup文件配置：

test: {
  environment: 'jsdom',
  globals: true,
  setupFiles: ['./vitest.setup.js'] // 引入自定义setup文件
}

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