web-dev-qa-db-ja.com

Mochaを使用してTypeScriptでJqueryをユニットテストするときの「$が定義されていません」エラーを修正するにはどうすればよいですか？

私はMochaユニットテストを書いていますTypeScriptコードを含むJquery。ドキュメントオブジェクトの取得にjsdomを使用しています。 TSコードをJSにコンパイルしてテストを実行すると、エラーがスローされます[ReferenceError：$ is not defined]。

私の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"）;も使用してみましたが、機能しません。

jqueryunit-testingtypescriptmochajsdom
9
Aditi

スクリプトはグローバルスペースからjQueryを取得するため、jQueryはグローバルに使用可能である必要があります。 var $ = require('jquery')(window);が次のように置き換えられるようにコードを変更した場合：

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

その後、それは動作します。 2つの呼び出しに注意してください。最初に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');
};
9
Louis

JsdomとjQueryをNode最初に：

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;
1
Jorge Luis Monroy

グローバル名前空間タイプ定義を変更できない、または変更したくない場合でも、次のように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);
0
TinkerTank