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

Question

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

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

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

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

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

Answer 1

Это одна из причин, по которой использование 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');
});

Answer 2

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

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

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 используется для восстановления значения макетируемой функции до исходного значения.