使用 Mocha 使用 Typescript 對 Jquery 進行單元測試時，如何修復“$ 未定義”錯誤？

Question

我正在為包含Jquery 的Typescript代碼編寫Mocha單元測試。 我正在使用jsdom來獲取文檔對象。 當我將 TS 代碼編譯為 JS 並運行測試時，它會引發錯誤[ReferenceError: $ is not defined] 。

我的打字稿代碼在這里

export function hello(element) : void {
    $(element).toggleClass('abc');
};

我的單元測試代碼如下：

import {hello} from '../src/dummy';

var expect = require('chai').expect;
var jsdom = require('jsdom');
var document = jsdom.jsdom();
var window = document.defaultView;

var $ = require('jquery')(window);

describe('TEST NAME', () => {

    it('should run', (done) => {
        hello($('div'));
        done();
    });
});

當我運行 Mocha 測試時，它顯示

    <failure message="$ is not defined"><![CDATA[ReferenceError: $ is not defined ...
]]></failure>

也嘗試使用global.$ = require("jquery"); 但不起作用。

Answer 1

jQuery 必須全局可用，因為您的腳本從全局空間獲取它。 如果我修改您的代碼，以便var $ = require('jquery')(window); 被替換為：

global.$ = require('jquery')(window);

那么它的工作原理。 注意兩個調用：第一個需要jquery ，然后通過傳遞window來構建它。 你也可以這樣做：

global.window = window
global.$ = require('jquery');

如果window全局可用，則不需要像第一個片段中那樣執行雙重調用：jQuery 只使用全局可用的window 。

您可能還想定義global.jQuery因為某些腳本依賴於它的存在。

這是運行的測試文件的完整示例：

/// <reference path="../typings/mocha/mocha.d.ts" />
/// <reference path="../typings/chai/chai.d.ts" />
/// <reference path="../typings/jsdom/jsdom.d.ts" />
/// <reference path="./global.d.ts" />

import {hello} from './dummy';

import chai = require('chai');
var expect = chai.expect;
import jsdom = require('jsdom');
var document = jsdom.jsdom("");
var window = document.defaultView;

global.window = window
global.$ = require('jquery');

describe('TEST NAME', () => {

    it('should run', (done) => {
        hello($('div'));
        done();
    });
});

該typings文件獲得使用通常方式tsd 。 文件./global.d.ts修復了在global上設置新值時可能遇到的問題。 它包含：

declare namespace NodeJS {
    interface Global {
      window: any;
      $: any;
    }
}

dummy.js也做了如下修改：

declare var $: any;

export function hello(element) : void {
    $(element).toggleClass('abc');
};

Answer 2

你需要先在 Node 中包含 jsdom 和 jQuery：

 npm install jsdom --save-dev npm install jquery --save-dev

然后將此行添加到您使用 jQuery 的 .js 文件中

 const jsdom = require("jsdom"); const { JSDOM } = jsdom; const { window } = new JSDOM(`...`); var jQuery = require('jquery')(window); var example = (function($) { .....your jQuery code.... })(jQuery); module.exports = example;

Answer 3

我在 2020 年發現了這個問題，路易斯讓我指出了正確的方向。 但是，我發現jsdom-global是一種在 Mocha 中獲取文檔的更簡單的替代方法。 我jsdom-global的說明安裝了jsdom-global

我使用這些行讓 jQuery 和 $ 按預期工作：

require('jsdom-global')();
global.window = window;
global.$ = require('jquery');
global.jQuery = $;

然后這個測試以優異的成績通過了：

const assert = require("chai").assert;
function test(){
    return "test";
}
describe('Setting up global constants...', function () {
    describe('Libraries...', function () {
        it('jQuery and $ are present', () => {
            assert(jQuery !== undefined);
            assert($ !== undefined);
            assert($ === jQuery);
            assert($.isFunction(test));
        });
    });
});

Answer 4

如果您不能或不想更改全局命名空間類型定義，您仍然可以包含 jQuery，如下所示：

const globalAny:any = global;
const $ = globalAny.$ = require('jquery')(window);

jQuery 的完整初始化然后變成：

const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = (new JSDOM());
const globalAny:any = global;
const $ = globalAny.$ = require('jquery')(window);

Answer 5

如上所述，您應該正確導入 jQuery： import $ = require('jquery');