我正在尝试在一个新项目中使用 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
?
最佳答案
当 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/