如何解决“未定义$"问题.使用Mocha使用Typescript对Jquery进行单元测试时出现错误? [英] How to fix "$ is not defined" error when unit testing Jquery with Typescript using Mocha?

问题描述

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

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].

我的打字稿代码在这里

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

当我运行Mocha测试时，它会显示

When I run Mocha test it shows

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

也尝试使用 global.$ = require("jquery"); ，但不起作用.

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

推荐答案

jQuery必须全局可用，因为您的脚本是从全局空间获取的.如果我修改您的代码，以便将var $ = require('jquery')(window);替换为:

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:

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

然后它起作用.请注意两个调用:第一个要求jquery，然后通过传递window进行构建.您可以选择执行以下操作:

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

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

如果window在全球范围内可用，则无需像第一个代码片段一样执行两次调用:jQuery仅使用全局可用的window.

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.

您可能还想定义global.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();
    });
});

typings文件是使用tsd的常规方法获得的.文件./global.d.ts修复了在global上设置新值可能会遇到的问题.它包含:

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:

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

dummy.js也进行了如下修改:

declare var $: any;

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

这篇关于如何解决“未定义$"问题.使用Mocha使用Typescript对Jquery进行单元测试时出现错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！