Стратегии тестирования на основе реакции: единичный, интеграционный и сквозной тестирования

Что нужно для тестирования в React Native

• Функции полезности – Форматизаторы данных, логика проверки, помощники по дате и математические операции.
• Таможенные крючки и #8211; Проверьте, что переходы состояния и побочные эффекты ведут себя так, как ожидалось.
• Продюсеры и логика управления состоянием – Подтвердите, что действия порождают правильное новое состояние.
• Презентационные компоненты и #8211; Убедитесь, что они обеспечивают правильный выход для данного реквизита (хотя это граничит с интеграцией, если речь идет о детских компонентах).

Пример практического испытания

Рассмотрим функцию утилиты, которая форматирует строку даты для отображения в пользовательском интерфейсе. Единичный тест будет поставлять различные значения входных данных и утверждать точную строку вывода. Используя Jest, вы можете написать:

import { formatDisplayDate } from './dateUtils';

describe('formatDisplayDate', () => {
 it('returns "Today" for the current date', () => {
 const now = new Date();
 expect(formatDisplayDate(now)).toBe('Today');
 });

 it('returns "Yesterday" for one day ago', () => {
 const yesterday = new Date();
 yesterday.setDate(yesterday.getDate() - 1);
 expect(formatDisplayDate(yesterday)).toBe('Yesterday');
 });

 it('returns a formatted short date for older dates', () => {
 const date = new Date('2024-03-15');
 expect(formatDisplayDate(date)).toBe('Mar 15');
 });
});

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

Преимущества модульного тестирования

• Быстрая петля обратной связи – Единичные тесты выполняются за доли секунды, что позволяет разработчикам быстро итерировать.
• Точечная точность – Когда модульный тест не срабатывает, сфера отказа сразу становится ясной.
• Позволяет TDD и #8211; Разработка, управляемая тестами, становится более естественной, когда тесты легкие и сфокусированные.
• Документация по примеру и #8211; Хорошо написанные единичные тесты служат исполняемой документацией для того, как функция предназначена вести себя.

Интеграция тестирования: проверка компонентного сотрудничества

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

React Native Testing Library (RNTL) является инструментом для интеграционного тестирования. RNTL опирается на Jest и предоставляет утилиты для рендеринга компонентов, запроса визуализируемого вывода и событий запуска. Он поощряет поведение тестирования, которое пользователи фактически испытывают, а не внутренние детали реализации.

Что такое интеграционный тест в реагировании на натив

• Компонентные взаимодействия и #8211; Нажимает ли кнопка правильную навигацию или изменяется состояние?
• Рабочие процессы формы и #8211; Появляются ли сообщения проверки, когда требуемые поля пусты?
• Поток данных и #8211; Обновляется ли компонент списка правильно, когда данные извлекаются из API (с высмеянными сетевыми запросами)?
• Поведение на уровне экрана и #8211; Переход экрана полного входа в систему из состояния простоя в состояние загрузки в состояние ошибки?

Примеры практических интеграционных тестов

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

import { render, fireEvent, screen } from '@testing-library/react-native';
import LoginScreen from '../screens/LoginScreen';

describe('LoginScreen', () => {
 it('shows validation error when email is empty on submit', () => {
 render(<LoginScreen />);

 const emailInput = screen.getByPlaceholderText('Email');
 const submitButton = screen.getByRole('button', { name: 'Log In' });

 // Leave email empty, fill in password
 fireEvent.changeText(screen.getByPlaceholderText('Password'), 'myPassword123');
 fireEvent.press(submitButton);

 expect(screen.getByText('Please enter your email address')).toBeTruthy();
 });
});

Этот тест подтверждает, что компонент обеспечивает соблюдение правил проверки, когда пользователь пытается представить неполную форму. Он не высмеивает внутренние функции или не беспокоится о деталях реализации библиотеки проверки & #8212; он проверяет поведение пользователя.

Преимущества интеграционного тестирования

• Поймает ошибки взаимодействия и #8211; Откройте проблемы, которые возникают только при общении компонентов, такие как неправильное прохождение опоры или неправильно настроенные обработчики событий.
• Более высокая степень достоверности, чем только единичные тесты и #8211; Прохождение единичных тестов для отдельных функций не гарантирует, что эти функции работают вместе правильно.
• Скорость баланса и реализм – Интеграционные тесты медленнее, чем единичные тесты, но намного быстрее, чем тесты E2E, занимая ценную промежуточную позицию в тестовой пирамиде.

Тестирование сквозного действия: моделирование реального пользовательского опыта

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

Detox является ведущей рамкой тестирования E2E для React Native. Построенная Wix, Detox разработана специально для React Native и предоставляет возможности тестирования в серой коробке. Она запускает тесты на устройстве (реальном или эмулируемом), синхронизируется с анимацией приложения и сетевыми циклами и предлагает чистый API для взаимодействия с пользователем. Другой вариант — Appium, который является более общим и может тестировать нативные, гибридные и мобильные веб-приложения, но ему не хватает некоторых оптимизаторов React Native, которые предоставляет Detox.

Что такое E2E тест в реагировании

• Критические пользовательские путешествия & #8211; Создание учетной записи, поиск продукта, поток проверки, обновления профиля.
• Навигация и глубокие ссылки & #8211; Убедитесь, что нажатие на глубокие ссылки уведомления на правильный экран.
• Оффлайн-поведение и #8211; Грациозно ли приложение справляется с потерей сети во время ключевой операции?
• Потоки push-уведомлений и #8211; приводит ли принятие уведомления к ожидаемому состоянию экрана?

Практический пример теста E2E с помощью детоксикации

describe('Checkout Flow', () => {
 beforeAll(async () => {
 await device.launchApp();
 });

 it('should add item to cart and complete purchase', async () => {
 await element(by.text('Add to Cart')).tap();
 await expect(element(by.text('Cart (1)'))).toBeVisible();

 await element(by.text('Checkout')).tap();

 await element(by.id('emailInput')).typeText('[email protected]');
 await element(by.id('passwordInput')).typeText('securePassword');
 await element(by.text('Log In')).tap();

 await element(by.text('Confirm Purchase')).tap();
 await expect(element(by.text('Order Confirmed'))).toBeVisible();
 });
});

Этот тест запускает приложение, взаимодействует с пользовательским интерфейсом точно так же, как пользователь, и подтверждает, что поток покупок успешно завершается. Поскольку Detox синхронизируется с циклом рендеринга приложения, он знает, когда анимация и сетевые запросы закончились, уменьшая нечеткие тесты.

Преимущества конечного тестирования

• Доверие, подобное производству и #8211; тесты E2E проверяют приложение в среде, которая близко отражает то, что испытывают пользователи.
• Поймает пробелы в интеграции и #8211; Проблемы, которые охватывают несколько подсистем, такие как изменение бэкэнда, которое нарушает контракт на мобильный API, пойманы до выпуска.
• Проверяет сторонние интеграции и #8211; Платежные шлюзы, поставщики аутентификации и аналитические SDK тестируются в контексте.
• Предоставляет безопасную сеть для основных выпусков и #8211; Запуск полного пакета E2E до того, как удар по версии придаст команде уверенность в отправке.

Разработка сбалансированной стратегии тестирования

Распространенной ошибкой является чрезмерное инвестирование в один тип теста, пренебрегая другими. Концепция тестовой пирамиды, популяризированная Майком Коном, рекомендует большое количество быстрых, изолированных единичных тестов на базе, умеренное количество интеграционных тестов в середине и небольшое количество медленных, дорогих тестов E2E наверху.

Для типичного применения React Native это может означать:

• 70% единичных тестов и #8211; Покрытие функций утилиты, крючков, редукторов и простых презентационных компонентов.
• 20% интеграционных тестов и #8211; Сосредоточение внимания на рабочих процессах на уровне экрана, валидации формы и взаимодействия компонентов с высмеиваемыми зависимостями.
• 10% сквозные тесты и #8211; Защита наиболее важных пользовательских поездок и потоков блокировки релиза.

Эти проценты являются отправной точкой, а не жестким правилом. Настройка комбинации на основе сложности вашего приложения, размера команды и профиля риска. Если ваше приложение обрабатывает чувствительные финансовые транзакции, вы можете выделить больше бюджета на тесты E2E для платежного потока.

Автоматизация и интеграция CI

Тестирование становится по-настоящему эффективным, когда оно автоматизировано. Запуск тестов вручную подвержен ошибкам и не масштабируется. Интегрируйте свой тестовый пакет в непрерывный конвейер интеграции (CI), такой как GitHub Actions, Bitrise или CircleCI.

Настройте CI для запуска юнит-тестов и интеграционных тестов по каждому запросу на вытягивание. Эти тесты достаточно быстры, чтобы завершить их в течение нескольких минут, обеспечивая быструю обратную связь с разработчиками. Запасные тесты E2E для слияний с основной веткой или для ночных пробегов, поскольку они занимают больше времени и требуют больше инфраструктуры.

Например, Detox может работать на CI с помощью эмуляторов Android или симуляторов iOS. Такие сервисы, как BrowserStack и Sauce Labs, предлагают облачные фермы устройств для проведения тестов E2E в масштабе без поддержки локальной лаборатории устройств.

Обычные подводные камни и как их избежать

Неудачные тесты

Ненадежные тесты, которые проходят и терпят неудачу, периодически разрушают доверие к набору тестов. Общие причины включают проблемы с временем (ожидание анимации или сетевого запроса для завершения), общее состояние между тестами и зависимость от внешних служб. Используйте встроенную синхронизацию Detox, избегайте совместного использования изменчивого состояния и изменяйте внешние API в интеграционных тестах, чтобы уменьшить шелуху.

Подробности тестирования реализации

Тесты, которые ломаются при рефакторе внутреннего кода (без изменения поведения), являются красным флагом. RNTL препятствует тестированию внутренних состояний или компонентов непосредственно. Вместо этого тестируйте то, что видит пользователь и взаимодействует с ним. Это делает тесты более устойчивыми и более ценными.

Сверх-шокирующий

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

Игнорирование поведения нативного модуля

React Native соединяет JavaScript и нативный код. Некоторые ошибки появляются только на реальных устройствах. В то время как тесты E2E на эмуляторах улавливают много проблем, запуск подмножества критических тестов на физических устройствах до выпуска является мудрой практикой.

Инструменты и экосистемы Резюме