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，鲍勃是您的叔叔。

我已经进入Jest的very brief page on DOM testing并跳过了使用jQuery的代码示例，因为我没有使用jQuery-并转到了提到它提供jsdom的段落。但是它没有解释这一点，也没有链接到jsdom文档，所以我搜索并找到了它们。而且他们甚至一次都没有提到Jest-因此我遵循了有关如何设置jsdom的说明，事实证明这是完全多余的，并导致了我遇到的错误。坦白地说，这句话“如果您使用的是Jest，则无需自己实例化jsdom”将为我节省大约两天的时间。

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

1 个答案: