如何使用Mocha对使用Typescript的Jquery进行单元测试时修复"$ is not defined"错误？

Question

我正在为包含Jquery的Typescript代码编写Mocha单元测试.我正在使用jsdom来获取文档对象.当我将我的TS代码编译为JS并运行测试时,它会抛出一个错误[ReferenceError:$未定义].

我的Typescript代码在这里

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

然后它工作.注意两个调用:1st要求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');
};