如何解决使用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”）;但不起作用。

来源

2016-07-26 Aditi

这有点无关，但你应该考虑内置的功能，角度提供了与DOM工作。你不应该需要jQuery来进行dom操作。 – toskv

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

来源

2016-07-26 16:22:33 Louis

我尝试过使用全局。$但它表示“$不是全局属性”。也尝试了（ global）。$并且它表示“$不是函数” – Aditi

我已经广泛地使用了JSDom，但我并不熟悉Typescript，所以我主要是从JSDom的角度写的。我已经更新了我的答案，以添加我所做的与Typescript相关的更改。 – Louis

工作就像一个魅力！谢谢路易斯:) – Aditi

至于说，你应该正确导入的jQuery：import $ = require('jquery');

来源

2016-07-26 14:19:22 Yahiko

您需要首先包括在节点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;

来源

2017-07-26 03:40:15

我不断收到错误，JSDOM不是一个构造函数，发生在'新的JSDOM（'...'）“ –

如何解决使用Mocha单元测试使用Typescript的Jquery时“$未定义”错误？

回答

相关问题