Как избежать проверки деталей реализации при проверке, что вызывается создатель действия?

Question

Я новичок в тестировании, и я пишу тесты для большого приложения React, которое использует Redux, и я пытаюсь следовать философии «Избегать тестирования деталей реализации» библиотеки React Testing.

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

Предположим, у меня есть список предметов для управления. Если я удаляю или создаю его, как пользователь, я ожидаю увидеть изменения в списке. Я мог бы легко проверить, что создатель действия вызывается, делая компонент неподключенным и передавая шпионский шут в качестве создателя действия, но это будет проверка деталей реализации (и, в моем случае, других недостатков). Если бы я хотел проверить это способом, имитирующим поведение, которое ожидает пользователь, мне бы понадобилось, чтобы создатель действия фактически отправил свое действие редуктору и изменил хранилище. И это потребует отдельного API тестирования, который имеет свои проблемы. Рефакторинг создателей действий для проверки их вызова тестом с целью пропуска обычного вызова API не является хорошим вариантом.

Каков наилучший способ продолжить работу здесь? Я подозреваю, что немного обдумываю это, и есть простое решение, но я до сих пор не смог ничего найти или придумать.

Answer 1

Вот как бы я это сделал. Сначала я следовал этому примеру , чтобы настроить мой тест. Я бы отобразил компонент, который показывает список и который связан с магазином.

На этом этапе я бы использовал fireEvent для имитации пользователя, который взаимодействует с вашим приложением. Например, вы можете смоделировать щелчок по кнопке, удаляющей элемент. После того, как я смоделировал щелчок, действие будет отправлено, хранилище будет обновлено, а приложение будет повторно отображено. Затем я бы проверил, правильно ли обновлен список.

/*
In this test I'm assuming the output of List is something like this:
<ol>
  <li>Foo <button>Delete Foo</button></li>
  <li>Bar <button>Delete Bar</button></li>
  <li>Baz <button>Delete Baz</button></li>
</ol>
*/
test('It's possible to remove elements from the list', () => {
  const { getByText, queryByText } = renderWithRedux(<List />)
  expect(getByText('Foo')).toBeInTheDocument()
  fireEvent.click(getByText('Delete Foo'))
  expect(queryByText('Foo')).not.toBeInTheDocument()
})