如何解决使用Mocha单元测试使用Typescript的Jquery时“$未定义”错误?
我正在写摩卡单元测试Typescript代码包含Jquery。我正在使用jsdom获取文档对象。当我将我的TS代码编译为JS并运行测试时,它会引发错误[ReferenceError:$未定义]。
我的打字稿代码是在这里
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();
});
});
当我运行摩卡测试显示
<failure message="$ is not defined"><![CDATA[ReferenceError: $ is not defined ...
]]></failure>
使用全球也试过。$ = require(“jquery”);但不起作用。
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');
};
至于说,你应该正确导入的jQuery:import $ = require('jquery');
您需要首先包括在节点jsdom和jQuery:
npm install jsdom --save-dev
npm install jquery --save-dev
,然后将这些行添加到你的。js文件你在哪里使用jQuery
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;
我不断收到错误,JSDOM不是一个构造函数,发生在'新的JSDOM('...')“ –
这有点无关,但你应该考虑内置的功能,角度提供了与DOM工作。你不应该需要jQuery来进行dom操作。 – toskv