Как сбросить состояние до и после / каждого шутника?

Question

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

<StateProvider>
  <ThemeProvider theme={theme}>
    <Component_Being_Tested />
  </ThemeProvider>
</StateProvider>

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

Например, у меня есть компонент ввода пароля, который включает кнопку «показать / скрыть пароль».При нажатии переключается логическое значение состояния showPassword.Начальное состояние установлено на false, что приводит к типу ввода «пароль».При первом щелчке он меняет состояние на true, а компонент меняет тип ввода на «текст».

Когда я запускаю тест для этого компонента, который включает нажатие кнопки, первый тест запускается простохорошо.Однако после выполнения этого первого теста состояние для showPassword остается равным true, а не возвращается к исходному значению false.

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

Я пытался создать функцию, которая сбрасывает состояние и запускает ее в beforeEach (), например так:

beforeEach(() => useContext(Store).dispatch(resetState()));

Однако это не удается, так как useContext является React Hook и можетвызываться только внутри компонента функции.

Как еще можно сбросить состояние до / после каждого теста?

Answer 1

Если бы вы использовали React Testing Library , вы могли бы использовать afterEach(cleanup).

Кроме того, я бы изменил архитектуру вашего компонента.Разделите его на дисплей и компоненты контейнера .Таким образом, вы можете явно протестировать экранный (презентационный) компонент, контролируя его состояние в тесте.И вы можете проверить компоненты контейнера, используя функциональные и / или тесты E2E.Вот отличное руководство по тестированию React .