JavaScript - не удается получить документ jsdom в тесте Jest

У меня есть модуль, который предоставляет некоторые удобные функции для манипулирования 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() приводит к той же ошибке.

Это какая-то проблема с порядком загрузки или что-то еще?


javascript unit-testing jestjs jsdom dom
person Scott Martin    schedule 20.11.2018    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Хорошо, решение было таким: мне совершенно не нужно было настраивать jsdom самостоятельно, потому что Jest уже сделал это. Вы можете установить document.body.innerHTML прямо в своих тестах, а Боб — ваш дядя.

Я добрался до очень краткой страницы Jest о тестировании DOM и пропустил пример кода, который использует jQuery, потому что я не использую jQuery — и добрался до абзаца, в котором упоминается, что он предоставляет jsdom. Но это не объяснялось и не ссылалось на документы jsdom, поэтому я искал и нашел их. И они не упоминают Jest ни разу — поэтому я следовал инструкциям по настройке jsdom, которые оказались совершенно избыточными и привели к той ошибке, которую я получал. Честно говоря, одно предложение «Если вы используете Jest, вам не нужно создавать экземпляр jsdom самостоятельно» спасло бы меня от необходимости рвать на себе волосы примерно на два дня.

person Scott Martin    schedule 21.11.2018