JSDOM + Ava – 测试全局依赖`document`的函数
JSDOM + Ava – test function that relies on `document` global
我正在编写一些与 document
对象相关的实用程序。
假设我正在编写一个使用 document
浏览器对象的程序。
// utils.js
export function myFn(callback) {
document.addEventListener(callback);
}
我的测试文件是这样的:
// utils.test.js
import test from "ava";
import { JSDOM } from "jsdom";
import sinon from "sinon";
import { myFn } from "./utils";
let dom, document;
test.beforeEach(() => {
dom = new JSDOM();
document = dom.window.document;
});
test("it calls the callback when document is ready", t => {
let fakeCb = sinon.spy();
myFn(fakeCb);
t.true(fakeCb.called);
});
在 运行 这个测试之后我得到一个 ReferenceError 告诉 "document is not defined",这是有道理的。
我的问题是:什么是使我的测试中的 document
变量在被测函数内部使用的好方法?
如果我向它传递一个 document
参数,这个函数就可以工作,但这是一个丑陋的解决方案。
Node.js 通过 global
.
提供对全局命名空间的访问
在 global
上设置 document
,它将在您的代码中可用:
// utils.test.js
import test from "ava";
import { JSDOM } from "jsdom";
import sinon from "sinon";
import { myFn } from "./utils";
test.beforeEach(() => {
global.document = new JSDOM().window.document;
});
test("it calls the callback when document is ready", t => {
// ...
});
我正在编写一些与 document
对象相关的实用程序。
假设我正在编写一个使用 document
浏览器对象的程序。
// utils.js
export function myFn(callback) {
document.addEventListener(callback);
}
我的测试文件是这样的:
// utils.test.js
import test from "ava";
import { JSDOM } from "jsdom";
import sinon from "sinon";
import { myFn } from "./utils";
let dom, document;
test.beforeEach(() => {
dom = new JSDOM();
document = dom.window.document;
});
test("it calls the callback when document is ready", t => {
let fakeCb = sinon.spy();
myFn(fakeCb);
t.true(fakeCb.called);
});
在 运行 这个测试之后我得到一个 ReferenceError 告诉 "document is not defined",这是有道理的。
我的问题是:什么是使我的测试中的 document
变量在被测函数内部使用的好方法?
如果我向它传递一个 document
参数,这个函数就可以工作,但这是一个丑陋的解决方案。
Node.js 通过 global
.
在 global
上设置 document
,它将在您的代码中可用:
// utils.test.js
import test from "ava";
import { JSDOM } from "jsdom";
import sinon from "sinon";
import { myFn } from "./utils";
test.beforeEach(() => {
global.document = new JSDOM().window.document;
});
test("it calls the callback when document is ready", t => {
// ...
});