Как исправить ошибку "$ is not defined " при модульном тестировании Jquery с Typescript с помощью Mocha?

Question

Как исправить ошибку "$ is not defined " при модульном тестировании Jquery с Typescript с помощью Mocha?

Я пишу Mocha юнит-тесты для Typescript кода, содержащего Jquery. Я использую jsdom для получения объекта document. Когда я компилирую свой код 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();

    });

});

Когда я запускаю тест Мокко, он показывает

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

]]></failure>

Также попробовал использовать global.$ = require ("jquery"); но не работает.

747 4

jQuery unit-testing typescript mocha jsdom

4 ответов:

Comments

Ничего не найдено.

Louis · Accepted Answer · 2016-07-26 21:18:59

JQuery должен быть доступен глобально, потому что ваш скрипт получает его из глобального пространства. Если я изменю ваш код так, что var $ = require('jquery')(window); будет заменено на:
global.$ = require('jquery')(window);
Тогда это работает. Обратите внимание на два вызова: 1-й, чтобы потребовать 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');
};

Jorge Luis Monroy · Accepted Answer · 2017-07-26 06:58:02

Сначала необходимо включить 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;

TinkerTank · Accepted Answer · 2018-07-01 16:22:01

Если вы не можете или не хотите изменять определение типа глобального пространства имен, вы все равно можете включить 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);

Yahiko · Accepted Answer · 2016-07-26 17:19:22

Как уже было сказано, вы должны правильно импортировать jQuery: import $ = require('jquery');