节点14.X上JEST中jQuery插件的文档为空

编程问答 2022-06-02

问题描述

我在Node 14.15.0上的JSDOM环境中运行Jest，并且访问 document 任何属性的jQuery插件使测试失败，因为 document 始终为null他们。

这是导致此问题的最小jQuery插件代码：

(function($){

    function FooBar(element,settings) {
      return document.querySelector("div");
    };

    $.fn.foobar = function() {
        var _ = this,opt = arguments[0],args = Array.prototype.slice.call(arguments,1),l = _.length,i,ret;
        for (i = 0; i < l; i++) {
            if (typeof opt == 'object' || typeof opt == 'undefined')
                _[i].foobar = new FooBar(_[i],opt);
            else
                ret = _[i].foobar[opt].apply(_[i].foobar,args);
            if (typeof ret != 'undefined') return ret;
        }
        return _;
    };
})(jQuery);

以上示例将这样导入测试对象：

import "jquery";
import "PATH_TO_MODULES/foobar.js";

export default class SomeTestSubject {

    constructor(private readonly $someObject: JQuery) {
        $someObject.foobar();
    }

这是setupFileAfterEnv，这里没什么幻想

import "core-js";
import "./__mocks__/RequestGuard";
import jQuery from "jquery";

global.jQuery = global.$ = jQuery;

// otherwise requestAnimationFrame cannot be awaited via flush-promises
global.requestAnimationFrame = cb => setImmediate(cb);

jest.setTimeout(70000);
jest.retryTimes(3)

//todo: remove when imports work
import "perfect-scrollbar/dist/perfect-scrollbar";

运行npm测试针对所描述的情况返回此错误消息：

LOCAL_PATH_TO_MODULE\foobar.js:5
    return document.querySelector("div");
                    ^
TypeError: Cannot read property 'querySelector' of null

当JSDOM应该在JEST中严格防止这种情况时，为什么此方案的文档为null？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjestjsjqueryjsdomjsdom