使用jest对使用jquery的Web模块进行单元测试

时间:2018-12-19 22:42:41

标签: javascript unit-testing jestjs yarnpkg

MbtPlanner.js是

(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是:

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

任何对差异有“令人信服”(:)解释的人都会得到我的答案。

0 个答案:

没有答案
相关问题