JavaScript

Question

我有一个模块为 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() 会导致相同的错误。

是某种加载顺序问题，还是其他问题？

Answer 1

好的，解决方案是——我完全不需要自己进行任何 jsdom 设置，因为 Jest 已经完成了。您可以直接在测试中设置 document.body.innerHTML，Bob 是您的叔叔。

我已经读到 Jest 的 very brief page on DOM testing 并跳过了使用 jQuery 的代码示例，因为我没有使用 jQuery - 并且读到了提到它提供的段落jsdom。但它没有解释，也没有向 jsdom 文档解释 link，所以我搜索并找到了它们。而且他们甚至一次都没有提到 Jest - 所以我按照有关如何设置 jsdom 的说明进行了操作，结果证明这是完全多余的，并导致了我遇到的错误。老实说，一句话 "If you're using Jest, you don't need to instantiate jsdom yourself" 可以让我节省两天的时间。

JavaScript - 无法在 Jest 测试中获取 jsdom 文档

JavaScript - can't get jsdom document in Jest test

unit-testing

dom

jestjs

jsdom