Современное окружение для React Native приложений

В этой статье мы рассмотрим настройку React Native окружения с использованием expo-cli, Typescript, и Jest.

Typescript поможет нам избежать ошибок при разработке и написать более эффективное мобильное приложение.

Современные разработки позволяют интегрировать Typescript в окружение разработки. Так же мы можем использовать VS Code, который отлично поддерживает Typescript.

Также интеграция с React Native даст нам возможность использовать сервис автодополнения, навигацию по коду и рефакторинг.

Expo — это набор инструментов, которые упрощают создание нативных React приложений. В этом уроке я собираюсь показать вам, как вы можете быстро создавать нативные React приложения, используя Expo.

Создаем проект

Сперва установим из yarn все зависимости, необходимые для создания шаблона приложения.

yarn global add expo-cli

Далее проинициализируем React Native приложение и выберем пустой шаблон Typescript.

~/ expo init exampleApp
? Choose a template: expo-template-blank-typescript
 Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ · 100% completed
? Yarn v1.15.2 found. Use Yarn to install dependencies? Yes

Теперь мы можем запустить проект и начать разработку приложения.

cd exampleApp
yarn start

Конфигурация Tslint

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

Сперва мы установим tslint пакет в глобальный каталог:
yarn global add tslint

Далее создадим конфигурацию tslint:
tslint --init

Эта команда создаст файл tslint.json со следующей конфигурацией:

{
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {},
  "rulesDirectory": []
}

Далее просто проверим typescript файлы при помощи нашей конфигурации:
tslint 'src/**/*.ts'

После этого VS Code будет автоматически использовать файл конфигурации для валидации кода в редакторе. Ошибки типов будут отображены в редакторе при разработке приложения.

Также в целях удобства добавим команды для yarn. Их можно использовать для локальной разработки или же проверки на этапе continuous integration.
«scripts»: {
«lint»: «tslint '*.ts*'»
}

Также tslint поддерживает возможность расширения правил валидации путем установки плагинов. На этом этапе мы добавим поддержу eslint правил.
yarn add tslint-eslint-rules --dev

Чтобы добавить плагин в конфигурацию tslint, просто добавим название плагина в поле extends:

"extends": [
    "tslint:recommended",
    "tslint-eslint-rules"
]

Jest и тесты на Typescript

Jest — это фреймворк для тестирования Javascript кода. Он облегчает тестирование, поддержку и разработку React Native приложения.

Сначала нужно установить фреймворк и добавить поддержку typescript, так как кодовая база у нас написана с поддержкой статической типизации.

yarn add --dev jest ts-jest @types/jest

Также стоит установить дополнительные пакеты:

• ts-jest — обработает и скомпилирует typescript код тестов в javascript
• @types/jest — добавит типы из окружения Jest
• react-native-testing-library — позволит рендерить React компоненты без привязки к DOM

И последний шаг — создание конфигурационного файла для тестов:

yarn ts-jest config:init

Эта команда сгенерирует конфигурационный файл из шаблона. Мы немного изменим его для React Native окружения. Файл будет выглядеть следующим образом:

module.exports = {
  jest: {
    preset: "react-native",
    transform: {
      "^.+\\.js$": "./node_modules/react-native/jest/preprocessor.js",
      "\\.(ts|tsx)$": "ts-jest"
    },
    globals: {
      "ts-jest": {
        tsConfig: "tsconfig.json"
      }
    },
    moduleFileExtensions: ["ts", "tsx", "js"],
    testRegex: "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"
  }
};

И напоследок добавим команду для запуска тестов в package.json:

«test»: «yarn test»

Пишем тесты для Jest

Попробуем написать пример тестов для Jest. Для этого создадим файл App.test.tsx:

export const helloFn = (name?: String = "World") => `Hello, ${$name}`;
 
describe("hello function", () => {
  it("should return `hello world`", () => {
    expect(helloFn()).toEqual(`Hello, World`);
  });
 
  it("should return `hello name`", () => {
    expect(helloFn("Zuck")).toEqual(`Hello, Zuck`);
  });
});
 

Для запуска тестов выполним раннее созданную yarn команду:

yarn test
 
 PASS  ./App.test.tsx
  hello function
    ✓ should return `hello world` (4ms)
    ✓ should return `hello name` (1ms)
 
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        1.316s
Ran all test suites.
  Done in 2.74s.
 

Все тесты прошли успешно. Но пока мы не можем писать тесты для компонентов. Давайте попробуем расширить наше окружение для тестирования React Native компонентов.
Нам понадобится еще один пакет — react-test-renderer. Он предоставляет специальный движок рендеринга для React, который дает Javascript структуру на выходе. Таким образом, нам необязательно настраивать DOM или нативные модули в тестовом окружении.

yarn add -D react-test-renderer

Далее обновим наш файл App.test.tsx с простым тестом для компонента App.tsx.

import React from "react";
import renderer from "react-test-renderer";
 
import App from "./App";
 
describe("App", () => {
  it("should display welcome message", () => {
    const tree = renderer.create(<App />);
 
    expect(tree.toJSON()).toMatchSnapshot();
    expect(tree.root.findByType("Text").children).toContain(
      "Open up App.tsx to start working on your app!"
    );
  });
});
 

Мы можем тестировать и нативные компоненты в тестовом окружении. На данном примере мы получили массив дочерних элементов у тега Text. Это нативный компонент из пакета React Native.

Заключение

Данный стек технологий позволил нам быстро создать окружение для разработки нативных приложений. Бизнес логика с использованием статических типов делает приложение более стабильным. Также строгая типизация Typescript помогает избежать ошибок при написании кода.
Разработка тестов внутри Jest для React Native компонентов происходит точно так же, как и для обычного React приложения.

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