Как проверить событие клика, используя чистый JavaScript и Jest

Question

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

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

Я пытался найти помощь, чтобы подумать, как решить эту проблему.Я думаю, что, возможно, мне следует создать макет для кнопки (вместо доступа к элементу DOM) и имитировать событие нажатия с помощью Enzyme (но я не знаю, действительно ли это необходимо).

Все, что могВ моих поисках было Jest-тестирование с использованием компонентов из React или Angular, что значительно усложнило мой вопрос, и поэтому я не получил ответа на простой JS.Документация Jest тоже не помогла.

Код моей функции:

const increment = () => {
  $increment.addEventListener("click", function() {
    if (+$quantity.value < 100) {
      $quantity.value = +$quantity.value + 1;
    }
  });
};

Полный код на этом codesandbox .

Answer 1

Ладно, мой JavaScript немного заржавел, но я думаю, что знаю проблему с просмотром кода (спасибо, кстати, так было проще понять) ...

Ваш инстинктчто вам нужен макет, это правильно, но сейчас, как работает ваша функция increment, она связана с $increment, который находится в локальной области видимости (что делает его неподходящим для насмешек).Вместо использования закрытой переменной в локальной области для привязки слушателя события вы хотите передать $element в функцию increment, а затем добавить к ней слушатель события.

const increment = ($element) => {
  $element.addEventListener("click", function() {
    if (+$quantity.value < 100) {
      $quantity.value = +$quantity.value + 1;
    }
  });
};

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

// In your test setup, or in the test itself

const myMockElement = {
  addEventListener: jest.fn(),
};

// Later in your test

increment(myMockElement);

expect(myMockElement.addEventListener.mock.calls.length).toBe(1);

Так же, как примечание к коду в приемнике событий, я бы рекомендовал передать его $quantity в функцию, а не захватывать его из локального контекста / области видимости / что бы то ни было его точно названногоin-javascript (то есть, что мы сделали с $element) ... это сделает тестирование НАМНОГО, НАМНОГО проще для тестирования и сделает ваши функции более надежными.

Надеюсь, это поможет!