![](/img/trans.png)
[英]jQuery not defined using mocha for testing wordpress javascript
[英]How to fix “$ is not defined” error when unit testing Jquery with Typescript using Mocha?
我正在为包含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"); 但不起作用。
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');
};
你需要先在 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;
我在 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));
});
});
});
如果您不能或不想更改全局命名空间类型定义,您仍然可以包含 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);
如上所述,您应该正确导入 jQuery: import $ = require('jquery');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.