Как смоделировать пользовательский хук внутри компонента React, который вы хотите протестировать?

Question

Если у вас есть компонент React, который вызывает пользовательский хук, который извлекает данные, как лучше всего смоделировать результат внутреннего пользовательского хука при тестировании компонента React?Я вижу 2 основных подхода:

1) Jest.mock пользовательский хук.Кажется, это наиболее рекомендуемый подход, но, похоже, требуется, чтобы тест обладал большим знанием внутренних деталей реализации и того, что ему может понадобиться, чтобы смоделировать, чем то, что может предложить интерфейс props компонента (при условии использования prop-types илиTypeScript)

2) Используйте подход внедрения зависимостей.Объявите хук как реквизит, но по умолчанию установите реальный хук, чтобы вам не приходилось устанавливать его везде, где вы визуализируете компонент, но разрешите переопределение с макетом для тестов.Вот надуманный пример кодов и ящиков с тестом, который макетирует пользовательский хук:

https://codesandbox.io/s/dependency-inject-custom-hook-for-testing-mjqlf?fontsize=14&module=%2Fsrc%2FApp.js

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

Answer 1

Почему бы вам не посмеяться над базовым методом, который вместо этого вызывает вызов API?

Например, если вы извлекаете данные с помощью fetch(), вместо этого вы высмеиваете это. Таким образом, вы можете определить пользовательский ответ на этот вызов, что облегчит тестирование самого хука.

Answer 2

С самим насмешливым хуком вы никогда не работаете, если настоящий работает хорошо вместе с вашим компонентом.

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

Вы можете издеваться над внешним вызовом API - я имею в виду издевательство fetch или XHR.Он все еще должен знать некоторые детали реализации - факт, что вы запускаете HTTP-запрос - но есть меньше вещей, о которых ваш тест должен знать.