документ не определен в document.getElementById, при написании тестовых случаев в Jest

Question

Я написал код для отключения кнопки, используя:

document.getElementBydId ('btn'). Disabled = true;

Этот вызов записывается внутри события жизненного цикла componentWillUnmount реакции,Используя этот способ, потому что кнопка поступает из общего репо, к которому нельзя получить доступ непосредственно внутри моего компонента.

Теперь все тестовые примеры для этого компонента дают сбой и выдают ошибку, что «документ»ноль.Мы используем Jest для написания юнит-тестов.

Может кто-нибудь помочь, пожалуйста

Answer 1

Вам необходимо смоделировать getElementById для вашего тестового случая.

Затем вы можете проверить, вызывается ли getElementById с правильными параметрами, а для параметра disabled задано значение true (предполагая, что оно ранее было ложным).

expect(document.getElementById).toHaveBeenCalled();
expect(document.getElementById.mock.calls[0][0]).toBe("btn");
expect(btnParams.disabled).toBeTruthy();

Я создал рабочий тестовый пример для этого, который можно найти в https://codesandbox.io/s/jznv48w32v

Обратите внимание, что мы используем beforeEach и afterAll в нашем тестовом примере.beforeEach сбрасывает нашу макетированную функцию после каждого теста.afterAll используется для восстановления исходного значения макетированной функции.

Answer 2

Это одна из причин, по которой использование DOM в React напрямую не рекомендуется.

document.getElementById('btn').disabled следует предоставить и смоделировать, увядать с помощью JSDOM или явным образом пометить переменные.

JSDOM может бытьприменяется к глобальной области видимости напрямую или с конфигурацией Jest (по умолчанию это заглушка DOM с JSDOM).

Также может быть задан с помощью:

beforeEach(() => {
  global.document = {
    getElementById: jest.fn()
  }
});

afterEach(() => {
  delete global.document;
});

it('...', () => {
  document.getElementById.mockReturnValue({ disabled: true });
  ...
  expect(document.getElementById).toHaveBeenCalledWith('btn');
});