如何在使用Mocha使用打字稿測試Jquery時修復“$未定義”錯誤?

[英]How to fix “$ is not defined” error when unit testing Jquery with Typescript using Mocha?


I am writing Mocha unit tests for Typescript code containing Jquery. I'm using jsdom for getting the document object. When I compile my TS code to JS and run the tests, it throws an error [ReferenceError: $ is not defined].

我正在為包含Jquery的打字稿代碼編寫Mocha單元測試。我使用jsdom獲取文檔對象。當我將我的TS代碼編譯為JS並運行測試時,它會拋出一個錯誤[參考錯誤:$未定義]。

My Typescript code is here

我的打字稿代碼在這里

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

My unit test code is as follows:

我的單元測試代碼如下:

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();
    });
});

When I run Mocha test it shows

當我運行摩卡測試時,它顯示出來了

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

Also tried using global.$ = require("jquery"); but does not work.

也試着用全球。美元=要求(“jquery”);但是不工作。

4 个解决方案

#1


7  

jQuery has to be available globally because your script gets it from the global space. If I modify your code so that var $ = require('jquery')(window); is replaced by:

jQuery必須是全局可用的,因為您的腳本是從全局空間獲得的。如果我修改了您的代碼,那么var $ =需要('jquery')(窗口);取而代之的是:

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

then it works. Note the two calls: 1st to require jquery, then to build it by passing window. You could alternatively do:

它的工作原理。注意兩個調用:1需要jquery,然后通過通過窗口構建它。你可以另外做的事:

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

If window is available globally, then there is no need to perform the double call as in the first snippet: jQuery just uses the globally available window.

如果窗口是全局可用的,那么就不需要在第一個片段中執行雙重調用:jQuery只使用全局可用的窗口。

You probably also want to define global.jQuery since some scripts count on its presence.

您可能還想定義全局變量。因為有些腳本依賴於它的存在。

Here is a full example of a test file that runs:

下面是一個運行的測試文件的完整示例:

/// <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();
    });
});

The typings files are obtained the usual way using tsd. The file ./global.d.ts fixes the issue you may get with setting new values on global. It contains:

使用tsd通常獲取排版文件。文件。/ global.d。ts修復了您在全局上設置新值時可能遇到的問題。它包含:

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

dummy.js was also modified like this:

假。js也是這樣修改的:

declare var $: any;

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

#2


1  

You need to include jsdom and jQuery in Node first:

首先需要在節點中包含jsdom和jQuery:

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

and then add this lines into your .js file where you are using jQuery

然后將這些行添加到使用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;

#3


0  

If you can't or don't want to alter the global namespace type definition, you can still include jQuery, as following:

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

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

The full initialization of jQuery then becomes:

jQuery的完整初始化變成:

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

#4


-1  

As said, you should import jQuery properly: import $ = require('jquery');

如前所述,您應該正確地導入jQuery:導入$ = require(“jQuery”);


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/07/26/d0bf1cf800b4b582e7305361f933e28b.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com