Тестирование компонентов в Next.js — Часть 2. Тестирование компонентов Redux в различных промежуточных слоях

Введение

Для достижения цели 100% охвата модульным тестом часть основной работы состоит в том, чтобы научиться тестировать компоненты Redux, которые чаще всего используются для управления глобальными состояниями в проекте Next.js/React.

В этой статье мы узнаем, как тестировать компоненты Redux с различным промежуточным ПО. Предположим, что вы знаете, как использовать Redux и Jest. Вы также можете прочитать следующие статьи для получения необходимых знаний.

Эта статья содержит следующие темы

• Подготовка
• Проверить редукторы
• Проверить действия
• Проверить сагу и API
• Проверьте компонент React
• Остальные компоненты

Подготовка

1. Настройка окружения и установка пакетов

Настройте тестовую среду для проекта Next.js с помощью Jest и Enzyme из следующей статьи.

Есть несколько пакетов, которые нам нужно установить для тестирования компонентов Redux.

npm install --save-dev redux-mock-store @testing-library/react @testing-library/jest-dom

2. Создайте компоненты для Redux

Промежуточное ПО, наиболее часто используемое для Redux, — это Redux-thunk и Redux-saga. Не стесняйтесь просматривать разницу между ними, если вы не так хорошо с ними знакомы.

3. Создайте тестовый пример

• Создайте Redux.test.js в папке __test__

4. Клонирует тестовые случаи командой npx (необязательно)

• Вы можете использовать следующую команду npx, чтобы создать папку проекта по умолчанию для проекта Next.js, который также предоставляет некоторые тестовые примеры.

• Отчет для React-thunk

• Отчет для React-саги

Проверить редукторы

Существует пример кода в двух разных промежуточных слоях.

Добавьте код в Redux.test.js. Разница в редюсере между Redux-saga и Redux-thunk для компонента или тестовых случаев невелика.

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

expect().toEqual()

Проверить действия

Существует пример кода в двух разных промежуточных слоях.

Добавьте код в Redux.test.js. Разница в действии между Redux-saga и Redux-thunk заключается в том, что первый вернет объект, а второй изменит состояние.

Мы также сравниваем результаты двух сторон, но для разных ожиданий.

Проверить сагу и API

Существует пример кода в двух разных промежуточных слоях.

Создайте Saga.test.js в папке __test__. Преимущество Redux-saga по сравнению с Redux-thunk заключается в том, что сага использует генератор и доходность, поэтому мы можем проверить это шаг за шагом.

Проверьте компонент React

Существует пример кода в двух разных промежуточных слоях.

Создайте Saga.test.js в папке __test__. Компонент легко протестировать, получив определенный текст для проверки, и важно добавить data-testid в компонент перед тестированием. Мы ожидаем, что он вернет правильный текст, и их можно будет сравнить с помощью

expect().toHaveTextContent()

Остальные компоненты

Типы (не буду проверять)

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

Состояния и селекторы (не буду тестировать)

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

Магазин (не буду проверять)

использованная литература

• краваллер/LegoSetImage.js
• Тестирование редукса
• Шутка | JOJO是你？我的替身能力是 Mock ！
• Шутка | 將 Unit Test （單元測試）導入 Redux 專案 — feat.React, Enzyme
• День19 | Component 的測試方式不私藏 — IT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

Резюме

Спасибо за вашего пациента. Я Шон. Я работаю инженером-программистом.

Эта статья — моя заметка. Пожалуйста, не стесняйтесь дать мне совет, если какие-либо ошибки. Я с нетерпением жду ваших отзывов.

• Страница Facebook для статей

• Последний побочный проект: Daily Learning

похожие темы

Как использовать двустороннюю привязку в Knout.js и ReactJS?

Узнайте, как использовать SignalR для создания приложения для чата

Мое отражение «Эффективного SQL»:

ИТ и сеть:

База данных:

Тестирование программного обеспечения:

Отладка:

DevOps: