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

标签 javascript jquery gulp ecmascript-6

我正在尝试在一个新项目中使用 ES2015 模块,并通过 gulp 使用 Mocha 和 Chai 进行单元测试。我将 jQuery 导入到源模块中(以便它可以调用 getJSON()),但是虽然主 $ 函数似乎存在,但附加到它的函数- 像 getJSONattr - 不是。

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

// 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

最佳答案

当 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;

关于javascript - ES2015 导入 jQuery 在测试用例中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39512877/

相关文章:

javascript - 如何最好地在 famo.us 中创建单个可 ScrollView ?

javascript - 聊天框滚动到底部

javascript - 下载小文件时如何在 JavaScript 中显示进度条?

javascript - 延迟或等待 3 秒然后删除类(class)

gulp - TypeError ...不是一个函数

node.js - 记录使用 gulp-connect 完成的所有请求

javascript - 使用 Google map Javascript API 时无法读取未定义的 setMap 属性

javascript - console.log 不适用于 jQuery?

jQuery 更改所选选项卡的颜色

ubuntu - Angular2 Quickstart gulp错误