Sco*_*tin 3 javascript dom unit-testing jsdom jestjs
我有一个模块，它为 DOM 操作提供了一些方便的功能，我正在尝试使用 Jest 和 jsdom 对其进行测试，但是在实例化它时我似乎做错了。
通过阅读其他问题和答案（例如这个），我了解到 Jest 的测试环境会自动设置为使用 jsdom 并且您需要替换global.document，但它无法像我目前拥有的那样工作。
这是重现问题的最小测试用例：
// domUtils.js
function el(id) {
return document.getElementById(id);
}
和
// domUtils.test.js
import { JSDOM } from "jsdom";
import * as domUtils from "../src/domUtils";
describe("DOM operations", () => {
// Workaround for jsdom issue 2304 - needed for later localStorage tests
const url = "http://localhost";
const documentHTML = '<!DOCTYPE html><div id="lorem" class="test">Lorem ipsum</div>';
global.document = new JSDOM(documentHTML, { url });
test("Get an element from the DOM", () => {
const loremDiv = domUtils.el("lorem");
expect(loremDiv.constructor.name).toEqual("HTMLDivElement");
});
}
这导致TypeError: Cannot read property 'constructor' of null. 更换调用domUtils.el()与document.getElementById()在同一个错误的结果。
这是某种加载顺序问题，还是其他什么？
好的，解决方案是 - 我完全不需要自己进行任何 jsdom 设置，因为 Jest 已经完成了。您可以document.body.innerHTML直接在测试中进行设置，而 Bob 是您的叔叔。
我已经访问了 Jest关于 DOM 测试的非常简短的页面，并跳过了使用 jQuery 的代码示例，因为我没有使用 jQuery - 并进入了提到它提供 jsdom 的段落。但它没有解释这一点，也没有链接到 jsdom 文档，所以我搜索并找到了它们。而且他们甚至一次都没有提到 Jest - 所以我按照有关如何设置 jsdom 的说明进行操作，结果证明这是完全多余的，并导致了我遇到的错误。老实说，一句“如果你在使用 Jest，你不需要自己实例化 jsdom”可以让我节省大约两天的时间。