Тестирование компонентов с Jest — настройка и создание первых тестов

Настройка Jest для React Native

Jest — это чрезвычайно популярный инструмент для тестирования JavaScript-приложений. Что круто, он идеально подходит для тестирования мобильных приложений на React Native. Давайте настроим Jest для нашего проекта, чтобы было с чем работать.

Установка Jest и необходимых библиотек

Окей, откройте ваш терминал и установим Jest и его друзей:

npm install --save-dev jest @testing-library/react-native @testing-library/jest-native react-test-renderer

Здесь:

• jest — сам тестовый фреймворк;
• @testing-library/react-native — библиотека для тестирования React Native-компонентов (аналог @testing-library/react для веба);
• @testing-library/jest-native — набор вспомогательных утилит для тестирования в Jest;
• react-test-renderer — рендеринг компонентов для тестирования.

Настройка Jest в проекте

Теперь давайте добавим конфигурацию Jest к нашему проекту. В файл package.json добавьте следующий блок:

"jest": {
  "preset": "react-native",
  "setupFilesAfterEnv": [
    "@testing-library/jest-native/extend-expect"
  ],
  "transformIgnorePatterns": [
    "node_modules/(?!(react-native|@react-native|react-navigation))"
  ]
}

Здесь:

• "preset": "react-native" сообщает Jest, что мы тестируем React Native-приложение.
• "setupFilesAfterEnv": [...] подключает расширения для удобного написания тестов.
• "transformIgnorePatterns" помогает обойти проблемы с некоторыми модулями из node_modules.

Проверка настройки

Чтобы убедиться, что Jest работает, выполните команду:

npx jest --version

Если версия Jest отобразилась, поздравляем, вы настроили Jest в своем проекте!

Написание первого теста

Пришло время написать наш первый тест. Пусть в нашем приложении уже есть компонент Button. Вот его код:

// components/Button.tsx
import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';

interface ButtonProps {
  title: string;
  onPress: () => void;
}

const Button: React.FC<ButtonProps> = ({ title, onPress }) => {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: 'white',
    textAlign: 'center',
  },
});

export default Button;

А теперь напишем тест на этот компонент.

Создание файла теста

Создайте файл Button.test.tsx рядом с компонентом. Jest отслеживает файлы с расширением .test.tsx или .spec.tsx, поэтому никаких дополнительных настроек не требуется.

// components/Button.test.tsx
import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import Button from './Button';

describe('Button component', () => {
  it('renders correctly with given props', () => {
    const { getByText } = render(<Button title="Click Me" onPress={() => {}} />);

    // Проверяем, что текст "Click Me" отображается
    expect(getByText('Click Me')).toBeTruthy();
  });

  it('calls onPress function when pressed', () => {
    // Создаем мок-функцию
    const onPressMock = jest.fn();

    const { getByText } = render(<Button title="Click Me" onPress={onPressMock} />);

    // Эмулируем нажатие
    fireEvent.press(getByText('Click Me'));

    // Проверяем, что функция была вызвана
    expect(onPressMock).toHaveBeenCalled();
  });
});

Что здесь происходит:

1. Мы импортируем render и fireEvent из библиотеки @testing-library/react-native.
2. Первый тест проверяет, что компонент рендерится с правильным текстом.
3. Второй тест эмулирует нажатие на кнопку и проверяет, что переданная функция onPress была вызвана.

Запуск тестов

Выполните команду:

npm test

Если всё настроено правильно, вы увидите зелёные тесты. Ура, вы только что написали свой первый тест!

Типизация тестов с TypeScript

Так как мы используем TypeScript, давайте типизируем наши тесты, чтобы код стал еще более осмысленным.

Например, типизация мок-функции:

const onPressMock: jest.Mock = jest.fn();

Или настройка интерфейсов для пропсов:

interface ButtonProps {
  title: string;
  onPress: () => void;
}

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

Типичные ошибки при тестировании

Ошибки при тестировании случаются, это нормально. Вот пара моментов, на которые стоит обратить внимание:

• Не забывайте очищать мок-функции. Если вы используете jest.fn(), после каждого теста вызывайте jest.clearAllMocks(), чтобы избежать перекрестных эффектов.
• Рендерите только то, что нужно. Не нужно подключать весь компонент, если вы тестируете только его часть.
• Не тестируйте библиотечные зависимости. Вам не нужно проверять, работает ли TouchableOpacity, это уже сделали за вас.

Итак, вы только что настроили Jest, написали первые тесты и узнали, как избежать типичных ошибок. Теперь ваш код будет как непробиваемый танк — всегда готов к любым изменениям и рефакторингам! В следующей лекции мы познакомимся с React Native Testing Library для тестирования пользовательского интерфейса — вперед к новым возможностям.

2

Задача

Модуль 3: React, 25 уровень, 8 лекция

Недоступна

Написание теста для компонента, проверяющего отображение текста

Написание теста для компонента, проверяющего отображение текста

Открыть