如何在 vitest 测试中为 jQuery 设置全局窗口（jQuery 需要一个带有文档的窗口）？

问题描述 投票：0回答：1

可能不太重要：安装是通过 webpack Encore 完成的，它生成一个 webpack 配置文件，我们使用 

yarn
作为包管理器，所以 
vitest
与 
yarn
一起安装。

  • jQuery 版本 3.6.4
  • vitest版本1.2.2

这是一个简化的问题：

// vitest.config.js
import path from 'path';

export default {
    resolve: {
        alias: {
            Common: path.resolve(__dirname, 'assets/packages')
        }
    }
};

// MyFooUsejq.js
import $ from 'jquery';

export default class MyFooUsejq {
    #$myDiv;
    constructor(selector) {
        this.#$myDiv = $(selector);
    }

    get innerHtml() {
        return this.#$myDiv.html();
    }
}

// MyFooUsejq.test.js
import { expect, test } from 'vitest';
import MyFooUsejq from 'Common/MyFooUsejq'; // Common is an alias configured with webpack.
import { JSDOM } from 'jsdom';

test('use jquery', () => {
    const jsdom = new JSDOM(`<!DOCTYPE html><html lang="en"><body><div id="foo">hello</div></body></html>`);
    global.window = jsdom.window;
    global.document = jsdom.window.document;
    const foo = new MyFooUsejq('#foo');
    expect(foo.innerHtml).toBe('hello');
});

运行

yarn vitest --config=vitest.config.js MyFooUsejq.test.js
给出错误：

错误：jQuery 需要一个带有文档的窗口

根据https://stackoverflow.com/a/52589859/5233188设置全局窗口对象应该可以让 jQuery 检测到它。

如何保留 
import $ from 'jquery';
并在 
MyFooUsejq
中为 jQuery 设置窗口？

javascript jquery webpack vitest webpack-encore
1个回答
0
投票

正如 Heretic Monkey 建议的那样，需要在设置全局 

window
之后加载 jQuery，但我没有在 
import
jQuery 的所有模块中使用动态导入，而是在 
Common/MyFooUsejq
的测试中添加了动态导入。但我也认为我设置了 
global.window
和 
global.document
错误。

工作测试：

import { expect, test } from 'vitest';
import { JSDOM } from 'jsdom';

test('use jquery', () => {
    const jsdom = new JSDOM(`<!DOCTYPE html><html lang="en"><body><div id="foo">hello</div></body></html>`);
    global.window = jsdom;
    global.document = jsdom.window;
    import('Common/MyFooUsejq').then(({ default: MyFooUsejq }) => {
        const foo = new MyFooUsejq('#foo');
        expect(foo.innerHtml).toBe('hello');
    });
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.