Тестирование — это то, что отличает хороший код от «только что работает». В мире мобильной разработки, где каждая ошибка может испортить пользовательский опыт, тестирование становится особенно важным. Оно позволяет находить баги ещё до того, как приложение попадёт в руки пользователя, и экономит нервы вашей команды (и, конечно, ваших пользователей).

Сегодня мы разберём:

• Почему важно тестировать.
• Разницу между юнит-тестами, интеграционным и end-to-end тестированием.
• Практическую реализацию: напишем юнит-тесты с помощью Jest и end-to-end тесты с Detox.

Почему важно тестировать?

Вы можете написать идеальный код, но всё равно остаётся риск, что:

• Что-то пойдёт не так при добавлении нового функционала.
• Пользователь кликнет на то, о чём вы не подумали.
• Ваше приложение развалится на устройствах с другими версиями ОС.

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

• Гарантировать стабильность: Вы можете быть уверены, что изменения не ломают существующий функционал.
• Экономить время: Найти баг на этапе разработки дешевле, чем после релиза.
• Повышать доверие: Как к продукту, так и внутри команды.

Типы тестирования

Юнит-тесты

Юнит-тесты проверяют работу отдельных «кусочков» вашего приложения: функций, компонентов, редюсеров. Они быстро выполняются и легко пишутся.

Когда использовать?

• Проверка работы функций и компонентов.
• Убедиться, что компоненты рендерятся корректно.

Интеграционные тесты

Интеграционные тесты проверяют, как взаимодействуют разные части приложения. Например, тестирует взаимодействие между компонентом и API.

Когда использовать?

• Проверка взаимодействия компонентов с сервером.
• Тестирование пользовательских сценариев.

End-to-End тесты (E2E)

End-to-End тесты проверяют всё приложение, имитируя действия пользователя. Это более сложный, но очень мощный подход.

Когда использовать?

• Убедиться, что приложение работает как задумано, от открытия до выполнения задачи.
• Тестирование полного пути: от ввода данных до получения результата.

Jest: для юнит-тестов

Jest — это инструмент для тестирования JavaScript-кода. Он интегрирован в React Native по умолчанию и поддерживает тестирование компонентов и функций.

Настройка Jest

Если вы используете React Native CLI, Jest уже включён. Для Expo добавьте Jest:

expo install jest react-test-renderer

Создайте файл jest.config.js:

module.exports = {
  preset: 'react-native',
  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
};

Компонент для тестирования

Создадим компонент Counter.js:

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text testID="counterText">Счётчик: {count}</Text>
      <Button title="Увеличить" onPress={() => setCount(count + 1)} />
      <Button title="Уменьшить" onPress={() => setCount(count - 1)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { padding: 20, alignItems: 'center' },
});

export default Counter;

Тестирование компонента

Создайте файл Counter.test.js:

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import Counter from './Counter';

describe('Counter Component', () => {
  it('должен отображать начальное значение 0', () => {
    const { getByTestId } = render(<Counter />);
    expect(getByTestId('counterText').props.children).toContain('Счётчик: 0');
  });

  it('увеличивает счётчик при нажатии на кнопку', () => {
    const { getByTestId, getByText } = render(<Counter />);
    const incrementButton = getByText('Увеличить');
    fireEvent.press(incrementButton);
    expect(getByTestId('counterText').props.children).toContain('Счётчик: 1');
  });

  it('уменьшает счётчик при нажатии на кнопку', () => {
    const { getByTestId, getByText } = render(<Counter />);
    const decrementButton = getByText('Уменьшить');
    fireEvent.press(decrementButton);
    expect(getByTestId('counterText').props.children).toContain('Счётчик: -1');
  });
});

Как запустить?

В терминале выполните:

npm test

Вы увидите, что все тесты проходят.

Detox: для End-to-End тестов

Detox — это инструмент для автоматизированного тестирования вашего приложения. Он имитирует действия пользователя: открытие приложения, нажатия, ввод текста.

Установка Detox

Установите Detox и его зависимости:

npm install -g detox-cli
npm install detox

Настройка Detox

Добавьте конфигурацию Detox в package.json:

"detox": {
  "configurations": {
    "android": {
      "type": "android.emulator",
      "device": {
        "avdName": "Pixel_3_API_30"
      },
      "build": "cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug",
      "binaryPath": "android/app/build/outputs/apk/debug/app-debug.apk"
    }
  }
}

Для iOS используйте ios.simulator.

E2E тесты

Создайте папку e2e и файл firstTest.e2e.js:

describe('Пример теста Detox', () => {
  beforeAll(async () => {
    await device.launchApp(); // Запускаем приложение
  });

  it('должен отображать начальное значение 0', async () => {
    await expect(element(by.text('Счётчик: 0'))).toBeVisible();
  });

  it('увеличивает счётчик при нажатии', async () => {
    await element(by.text('Увеличить')).tap();
    await expect(element(by.text('Счётчик: 1'))).toBeVisible();
  });

  it('уменьшает счётчик при нажатии', async () => {
    await element(by.text('Уменьшить')).tap();
    await expect(element(by.text('Счётчик: 0'))).toBeVisible();
  });
});

Запуск Detox

Соберите приложение:

detox build -c android

Запустите тесты:

detox test -c android