Настройка Jest в приложении Expo, использующем Firebase 🔥

Я пишу это (очень) краткое руководство, чтобы помочь любому коллеге-разработчику, столкнувшемуся с теми же проблемами, что и я, пытаясь настроить свое приложение Expo/React Native с помощью Jest для модульных тестов. Мне было трудно найти какую-либо актуальную информацию по теме. И та информация, которую я нашел, в большинстве случаев казалась неполной. Итак, давайте приступим к делу.

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

1. Установка зависимостей:

Jest-Expo нужен только в том случае, если вы работаете над приложением Expo. Вы можете использовать либо react-test-renderer, либо react-native-testing-library. Вам не нужны оба, так как react-native-test-library построен поверх react-test-renderer. Также, если вы планируете использовать Enzyme, рассмотрите возможность использования вместо нее react-native-testing-library, так как это замена Enzyme (как упоминалось здесь). Устранение необходимости установки нескольких библиотек. Итак, давайте продолжим и установим эти зависимости, используя следующую команду:

yarn add --dev jest jest-expo react-test-renderer firebase-mock

npm i jest jest-expo react-test-renderer firebase-mock --save-dev

2. Настройка:

Приложение expo требует небольшой настройки, прежде чем вы сможете запускать тесты. Обновите файл package.json, включив в него следующие строки:

"scripts": {
    ...(ignored lines of code)
    "test": "jest ./tests"
  },
  "jest": {
    "preset": "jest-expo",
    "rootDir": ".",
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-clone-referenced-element|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|sentry-expo|native-base))"
    ]
  },
...(ignored lines of code)

Конфигурация "jest" также может использоваться для приложений React Native.

3. Напишите простой тест:

Теперь создайте каталог tests в корне вашего проекта и добавьте файл, который мы назовем App.spec.js. Давайте добавим простой мгновенный тест, чтобы проверить, работает ли наша текущая установка:

import 'react-native';
import React from 'react';
import renderer from 'react-test-renderer';
import App from '../App';
it('App should render correctly', () => {
  const tree = renderer.create(<App />).toJSON();
  expect(tree).toMatchSnapshot();
});

Теперь, если мы запустим yarn test или npm run test, даже несмотря на то, что тест может пройти, вы можете увидеть кучу ошибок, подобных тем, которые вы видите на изображениях ниже:

Теперь эти ошибки могут очень сильно ввести в заблуждение относительно реальной проблемы. Что вам нужно сделать дальше, так это Mock Firebase.

4. Имитация Firebase для тестирования

Основная цель добавления firebase-mock состояла в том, чтобы предоставить простой способ имитировать SDK firebase, чтобы ваши тесты на самом деле не попадали в удаленную базу данных firebase. Теперь, когда я писал эту статью, я не мог найти подходящей документации о том, как на самом деле использовать firebase-mock. Реализация, предложенная firebase-mock, казалась довольно неполной. Так начался мой кошмар с поиском макета базы огня. Я нашел много фрагментов и кратких описаний, но большинство из них были неполными или устаревшими и не поддерживались. Это также заставило меня понять, что зависимость от библиотеки, предназначенной для насмешек, имеет больше смысла с точки зрения удобства обслуживания. Но увы, как я его использую. После долгих поисков я наконец нашел, как использовать firebase-mock. Чтобы использовать это, во-первых, мы создаем новый каталог __mocks__, который будет содержать все наши макеты. В идеале мне бы хотелось, чтобы этот каталог находился в каталоге, который мы создали. Но на данный момент я не смог найти хорошего решения, как добиться этого в Jest. Теперь мы создаем файл с именем, совпадающим с именем библиотеки, которую мы пытаемся имитировать. В нашем случае имя файла будет firebase.js, так как нам нужно имитировать библиотеку firebase. Откройте только что созданный firebase.js и добавьте в него следующий код:

import firebasemock from 'firebase-mock';
const mockdatabase = new firebasemock.MockFirebase();
const mockauth = new firebasemock.MockFirebase();
const mocksdk = new firebasemock.MockFirebaseSdk(path => (
  path ? mockdatabase.child(path) : mockdatabase
),
() => mockauth);
export default mocksdk;

Теперь, если вы вернетесь к своему терминалу и снова запустите yarn test или npm run test, вы увидите 🦄🌈, шучу, но вы увидите, что ошибки волшебным образом исчезли, и ваш тест прошел успешно.

5. Какой шаг 5!?

Нет, больше никаких шагов, кроме того, что вы можете начать писать тесты прямо сейчас! Jest поддерживает модульное тестирование, но если вам нужно провести сквозное (e2e) тестирование, я бы посоветовал использовать Detox. Хорошую статью по настройке Detox в вашем проекте для e2e-тестирования вы можете найти здесь.

Это все люди! 🐰🥕

Спасибо, что прочитали эту статью. Я надеюсь, что эта статья была вам полезна и избавила вас хотя бы от некоторых проблем с настройкой Jest. Надеюсь, вам не придется мучиться, как мне пришлось, пытаясь настроить тестирование для моего проекта Expo/React Native.

Привет 👋, я Шалом Сэм, разработчик полного стека. Я работаю разработчиком уже более 9 лет. Я кодоголик и люблю создавать вещи в Интернете, а теперь и на нативных устройствах благодаря React Native. Я надеюсь, что эта статья была хоть как-то полезна. Если вам понравилась эта статья и вы хотели бы видеть больше подобных, поделитесь ею и подпишитесь.

Первоначально опубликовано на http://techunderthesun.in 11 июня 2019 г.

Настройка Jest в приложении Expo, использующем Firebase 🔥