Блог

Главная - Вопросы по программированию - Как протестировать динамические изменения в DOM через JavaScript с помощью Jest или какой-либо другой библиотеки тестирования?

Как протестировать динамические изменения в DOM через JavaScript с помощью Jest или какой-либо другой библиотеки тестирования?

#javascript #unit-testing #testing #jestjs #jsdom

#javascript #модульное тестирование #тестирование #jestjs #jsdom

Вопрос:

Я динамически добавляю <script> тег в документ <head> при загрузке страницы в зависимости от среды.

Функция:

 export const loadScript = () => {
  // load script tag into head
  const HEAD = document.getElementsByTagName('head')
  const SCRIPT_TAG = document.createElement('script')
  SCRIPT_TAG.setAttribute('src', process.env.SCRIPT_SRC)
  SCRIPT_TAG.setAttribute('async', true)
  HEAD[0].append(SCRIPT_TAG)
}

Я хочу написать тест, который проверяет, попал ли loadScript() тег в head после запуска <script> функции. Наша среда настроена с помощью Jest, и я не нашел удовлетворительного примера, который демонстрирует, как это сделать, или работает.

Я новичок в тестировании и был бы признателен за любые предлагаемые решения или подсказки.

Ответ №1:

Я полагаю, что самый простой способ протестировать это было бы что-то вроде этого:

 test('loadScript', () => {
  process.env.SCRIPT_SRC = 'the-src';
  loadScript();
  expect(document.head.innerHTML).toBe('<script src="the-src" async="true"></script>');
});

Это работает, потому что тестовая среда по умолчанию для Jest является jsdom , которая имитирует document .

Ответ №2:

 test('loadScript', () => {
  loadScript();
  const script = document.getElementsByTagName('script')[0];
  // trigger the callback
  script.onreadystatechange(); // or script.onLoad();
  expect("something which you have on load").toBe('expected result on load');
});

Комментарии:

1. Добавление некоторых деталей будет полезно относительно того, почему это будет работать.