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”);
#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”);