我有一个模块，它为 DOM 操作提供了一些方便的功能，我正在尝试使用 Jest 和 jsdom 对其进行测试，但是在实例化它时我似乎做错了。
通过阅读其他问题和答案(例如 this one )，我了解到 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 的 very brief page on DOM testing 并跳过了使用 jQuery 的代码示例，因为我没有使用 jQuery - 并进入了提到它提供 jsdom 的段落。但它没有解释这一点，也没有链接到 jsdom 文档，所以我搜索并找到了它们。而且他们甚至一次都没有提到 Jest - 所以我按照有关如何设置 jsdom 的说明进行操作，结果证明这是完全多余的，并导致了我遇到的错误。老实说，一句“如果你在使用 Jest，你不需要自己实例化 jsdom”可以让我节省大约两天的时间。
关于JavaScript - 无法在 Jest 测试中获取 jsdom 文档，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53393508/