Как смоделировать компонент React, который использует объект документа?

Question

В настоящее время я пишу модульные тесты для компонента реагирования в моем приложении.Компонент реагирует на использование API-интерфейса DOM, например document.getElementById ().Когда я использую shallow () или mount () из фермента, я получаю сообщение об ошибке, в котором говорится, что объект документа имеет значение null:

Я думал, что jest уже поставляется с jsdom какБезголовый браузер.Как я могу исправить эту проблему, чтобы получить доступ к поддельному объекту dom?

Answer 1

Прежде всего, компонент предпочтительно не должен использовать DOM напрямую, потому что это влияет на тестируемость и SSR.Если он использует, предпочтительно использовать относительные запросы, а не document.

JSDOM - это не браузер без заголовка, а среда Node.js, которая эмулирует среду браузера.

Jest использует JSDOM по умолчанию .document не может быть null, если только он не был специально ему назначен.Если Jest не настроен на использование JSDOM, выдается ошибка document is not defined.

В сообщении об ошибке указывается, что document.getElementById() результат null, а не document.

document.getElementById предполагается использовать как любую другую функцию:

jest.spyOn(document, 'getElementById').mockReturnValueOnce({ value: '...' });