Тестирование приложений React Native (Часть 1: Снимки)

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

В приложениях CRNA, вероятно, уже есть Jest (jest-expo, с предустановкой Expo). Создайте каталог папки __tests__ в корневой папке приложения и напишите свой первый тест:

Запустите npm test или yarn test и наблюдайте, как интерактивный интерфейс командной строки Jest отображает результаты теста. Если вы измените файл:

Jest автоматически перезапустит тест и отобразит результаты.

Теперь давайте протестируем настоящий компонент React Native. Если у вас есть компонент <TextField>, который обертывает <TextInput> RN (добавление стиля, проверки и т. Д.), Он может выглядеть примерно так:

import React, { Component } from 'react'
import { TextInput, StyleSheet } from 'react-native'
export default class TextField extends Component {
  render() {
    const { style } = this.props
    return (
      <TextInput
        ref={textInput => { this._root = textInput }}
        {...this.props}
        style={[styles.textInput, style]}
        underlineColorAndroid="transparent"
        onChangeText={text => this.handleTextChange(text)}
      />
    )
  }
  handleTextChange(text) {
    const { onChangeText } = this.props
    if (typeof onChangeText === 'function') {
      onChangeText(text)
    }
  }
}
const styles = StyleSheet.create({
  textInput: {
    width: '100%',
    padding: 10,
    borderColor: '#000',
    borderWidth: StyleSheet.hairlineWidth,
  },
})

Во-первых, вы можете убедиться, что он вообще отображается (т.е. нет синтаксических ошибок, ссылок на несуществующие стили и т. Д.).

import React from 'react'
import renderer from 'react-test-renderer'
import TextField from 'app/components/input/TextField'
it('renders correctly', () => {
  const field = {
    placeholder: '[email protected]',
    value: '123'
  }
  const tree = renderer.create(<TextField {...field} />).toJSON()
  expect(tree).toMatchSnapshot()
})

Это тест на моментальный снимок. toJSON() преобразует графический интерфейс (текстовое поле) в сериализуемую строку JSON и сохраняет ее в файле моментального снимка. toMatchSnapshot() сравнивает содержимое файла моментального снимка с динамически сгенерированной строкой при каждом запуске теста. Если они совпадают, тест проходит. Это поможет вам убедиться, что ваш пользовательский интерфейс не изменится неожиданно.

Затем вы можете проверить, принимает ли он опору style и правильно ли ее использует.

it('accepts style prop', () => {
  const field = {
    placeholder: '[email protected]',
    value: '123',
    style: StyleSheet.create({ marginTop: 20 })
  }
  const tree = renderer.create(<TextField {...field} />).toJSON()
  expect(tree).toMatchSnapshot()
})

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

exports[`accepts style prop`] = `
<TextInput
  allowFontScaling={true}
  onChangeText={[Function]}
  placeholder="[email protected]"
  style={
    Array [
      Object {
        "borderColor": "#000",
     "borderWidth": 0.5,
        "padding": 10,
        "width": "100%",
      },
      Object {
        "marginTop": 20,
      },
    ]
  }
  underlineColorAndroid="transparent"
  value="123"
/>
`;

Если TextField изменен (например, его свойства изменены, его стиль изменен и т. Д.), Тесты моментальных снимков не пройдут. Это также произойдет, если вы намеренно измените TextField, возможно, на проверку. Затем вам нужно будет обновить снимки, запустив jest — updateSnapshot или используя интерактивный режим Jest:

Jest Snapshot Testing - это форма модульного тестирования, при котором тестируются отдельные компоненты. Его также можно применять для тестирования отдельных экранов, действий Redux и редукторов, среди прочего.

Однако, чтобы проверить функциональность и состояние компонента, вам нужно будет фактически смонтировать компонент, используя библиотеку Airbnb's Enzyme или что-то подобное. Монтаж компонента вызовет методы жизненного цикла и позволит вам управлять его хранилищем, моделировать события (нажатие, ввод и т. Д.) И пересекать его вывод.

Это будет продолжено в Части 2.