Question

我开发了一个简单的jQuery插件，我想使用facebook的jestjs框架执行一些自动化测试。

该插件是一个自执行的功能：

插件代码

; (function ($, window, document, undefined) {

    var pluginName = 'searchAreaControl';

    function Plugin(element, options) {
        this.el = element;
        this.$el = $(element);   
        this.opt = $.extend(true, {}, $.fn[pluginName].defaults, options);
        this.rootClassName = 'elem-searchAreaControl';
        this.popupID = null;
        this.init();
    }

    Plugin.prototype = {
      ...
    }

    // Methods ...

})(jQuery, window, document);

项目的文件夹结构如下：

Root
 |
 +-- __test__
 |   |
 |   +-- sum.test.js
 |
 +-- searchAreaControl
 |   |
 |   +-- css
 |   +-- searchAreaControl.js
 |
 +-- node_modules
 |
// And other folders

sum.test.js （Jest测试）

jest.dontMock('jquery').dontMock('searchAreaControl');
var $ = require('jquery');
var searchAreaControl = require('../searchAreaControl/searchAreaControl');

test('Initialize plugin', function() {
    document.body.innerHTML = '<button id="myButton" class="elem-searchAreaControl" type="button"></button>';
    $('#myButton').searchAreaControl();
    expect($('#myButton').hasClass('elem-searchAreaControl')).toEqual(true);
});

在测试文件中，我创建了一个按钮元素，并尝试初始化它上面的searchAreaControl插件。我希望在初始化之后，这个按钮元素将具有类elem-searchAreaControl。

我跑

npm test

我收到了这个错误：

无法从'sum.test.js'找到模块'searchAreaControl'

只要searchAreaControl.js不是模块，我就认为我无法使用require('searchAreaControl')。有没有人有经验表明解决方案？

以下是完整代码Github repo。

Answer 1

我创建了setup-jest.js

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

package.json中的

"jest": {
   "setupFiles": ["./setup-jest.js"]
}

然后在启动npm test

时自动需要jQuery

Answer 2

在package.json中：

"jest": {
        "setupFiles": ["./source/setup-jest.js"]
 },

在source / setup-jest.js中：

import $ from 'jquery';
global.$ = global.jQuery = $;

Answer 3

如果您使用 Jest 27+，节点现在是默认的 testEnvironment。如果您需要在 jest 设置脚本中使用 jQuery，请务必先将 testEnvironment 改回 jsdom。

在jest.config.js中：

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
  testEnvironment: 'jsdom'
}

在jest.setup.js中：

import $ from 'jquery';
global.$ = $;

// If you want to mock bootstrap
global.$.fn.modal = jest.fn(() => $());
global.$.fn.carousel = jest.fn(() => $());
global.$.fn.tooltip = jest.fn(() => $());

如何在jest测试文件中要求jQuery插件？

3 个答案: