Блог

Главная - Вопросы по программированию - Как я могу протестировать эту функцию с помощью Jest?

Как я могу протестировать эту функцию с помощью Jest?

#javascript #unit-testing #jestjs

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

Вопрос:

Я пытаюсь выполнить модульное тестирование функции пишущей машинки, но полученное значение не определено, что бы я ни делал.

Я просмотрел документы Jest, и я также безуспешно пробовал async.

 let speed = 120;

  function typeWriter(id, text) {
    return function () {
      if (text) {
        document.getElementById(id).innerHTML  = text[0];
        setTimeout(typeWriter(id, text.slice(1)), speed);
      }
    };
  }
typeWriter("job-title", "Web Developer")();

Я ожидаю, что значение innerHTML элемента с идентификатором job-title будет Web Developer вместо undefined .

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

1. Что вы подразумеваете под выводом?

2. Функция typewriter принимает идентификатор элемента и строковое значение, которое будет добавляться к целевому элементу по одному символу за раз. Таким образом, результатом будет значение значения innerHTML целевого элемента.

3. Когда я запускаю этот скрипт, я вижу Web Developer в элементе. Что вы видите? не определено? (О, в качестве отступления, пожалуйста, используйте textContent вместо innerHTML , поскольку в вашем коде есть уязвимость безопасности innerHTML .)

4. Спасибо, что перезвонили мне. Возможно, мне следовало быть более ясным, он отлично работает в браузере, но я не могу успешно протестировать его с помощью Jest.

Ответ №1:

Вам нужно будет использовать Jest макеты таймера, подобные этому:

 let speed = 120;

function typeWriter(id, text) {
  return function () {
    if (text) {
      document.getElementById(id).innerHTML  = text[0];
      setTimeout(typeWriter(id, text.slice(1)), speed);
    }
  };
}

describe('typeWriter', () => {
  beforeEach(() => { jest.useFakeTimers(); });
  afterEach(() => { jest.useRealTimers(); });

  it('should work', () => {
    document.body.innerHTML = '<div><span id="job-title"></span></div>';
    const text = "Web Developer";

    typeWriter("job-title", text)();

    for (let i = 1; i <= text.length; i  ) {
      expect(document.getElementById('job-title').innerHTML).toBe(text.substring(0, i));
      jest.advanceTimersByTime(speed);
    }
  });
});