Question

我正在尝试在新项目上使用ES2015模块，并通过gulp与Mocha和Chai进行单元测试。我正在将jQuery导入源模块（以便它可以调用getJSON()），但是主$函数似乎存在，附加到它的函数 - 如getJSON或attr - 不是。

这是一个最小的测试用例：

// minimal-test-case.js
import $ from "jquery";

export function minimalTestCase1() {
  return $;
}

export function minimalTestCase2() {
  return $.getJSON;
}

这是相应的测试：

// minimal-test-case-test.js
import {expect} from "chai";
import {describe, it} from "mocha";
import {minimalTestCase1, minimalTestCase2} from "../../../app/es/services/minimal-test-case.js";

describe("a minimal test case", () => {
  it( "should be able see jquery", () => {
    expect(minimalTestCase1()).to.be.a.function;
  } );

  it( "should be able see jquery functions", () => {
    expect(minimalTestCase2()).to.not.be.undefined;
  } );
});

测试用例1成功，但测试用例2失败。

相应的gulp任务是：

function testUnitTask() {
  return gulp
    .src(["test/unit/**/*.js"])
    .pipe(gulpMocha({
      compilers:babelCompiler
    }));
}
gulp.task("test:unit", testUnitTask);

import模式似乎是我在别处看到过的模式。为什么我看不到$.getJSON？

Answer 1

当jQuery检测到它处于commonjs环境中并且没有可用的全局文档时，很可能会获得jQuery导出的虚函数。我建议将jsdom添加到您的测试设置并添加一个像这样的最小安装文件

const jsdom = require('jsdom').jsdom;
global.document = jsdom('<body></body>');
global.window = document.defaultView;
global.navigator = window.navigator;
global.XMLHttpRequest = window.XMLHttpRequest;

Answer 2

您可能还想在测试中导入jquery，如果这是您的事情。

Something like this
import $ from 'jquery';
describe('Prepop test Page', () => {
    beforeEach(() => {
        $('head').append('<meta name="api_token" content="some token" />');
        $('head').append(`<meta name="sample_data" content="${sampleData}"/>`);
        $('head').append('<meta name="action_url" content="/api/ext/v1/prepop/" />');
        $('body').append('<div> </div>');

然后尽可能模拟你的jquery函数和选择器。

ES2015导入的jQuery在测试用例中不起作用

2 个答案: