использование jest для модульного тестирования веб-модуля с использованием jquery - PullRequest
Новая
       13

использование jest для модульного тестирования веб-модуля с использованием jquery

0 голосов
/ 20 декабря 2018

MbtPlanner.js is 

(function (exports) {
    "use strict";

    var MbtPlanner = function (id) {
        if (exports.jQuery === undefined) {
            throw "jQuery required for MbtPlanner";
        }

        if (!id.startsWith("#"))
            id = "#" + id;
        this.Id = id;
        this.ResetPlanner();
    };

    MbtPlanner.prototype.ResetPlanner = function () {
        $(this.Id).html("");
        this.Tasks = [];
    };  

    exports.MbtPlanner = MbtPlanner;
})(this);

MbtPlanner.test.js is: 

var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
global.$ = global.jQuery = $;

const Planner = require('./MbtPlanner');

test('creating empty planner', () => {
    expect((function(){ 
        var p = new Planner.MbtPlanner("abc"); 
        return p.Tasks.length;})()
    ).toBe(0);
});

yarn test приводит к следующей ошибке: 

 $ jest
 FAIL  ./mbtPlanner.test.js (5.062s)
 × creating empty planner (97ms)

  ● creating empty planner

TypeError: $ is not a function

  65 |
  66 |              MbtPlanner.prototype.ResetPlanner = function () {
> 67 |                      $(this.Id).html("");
     |                      ^
  68 |                      this.Tasks = [];


  at MbtPlanner.$ [as ResetPlanner] (mbtPlanner.js:67:4)
  at new ResetPlanner (mbtPlanner.js:48:9)
  at mbtPlanner.test.js:13:17
  at Object.<anonymous>.test (mbtPlanner.test.js:12:12)

Как видите, я могу проверить наличие jquery, но ожидается, что $ будет «членом» MbtPlanner.

Как мне сопоставить / смоделировать $ с jquery?

РЕШЕНИЕ выглядит следующим образом: 

var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
//var $ = jQuery = require('jquery')(window);
//global.$ = global.jQuery = $;
global.$ = global.jQuery = require('jquery');

var Planner = require('./MbtPlanner');

test('creating empty planner', () => {
    expect((function(){     
        var p = new Planner.MbtPlanner("abc"); 
        return p.Tasks.length;})()
    ).toBe(0);
});

Любой, у кого есть «убедительное» (:)) объяснение разницы, получит мой ответ.

...