Testarea aplicațiilor React Native

At Facebook, we use Jest to test React Native applications.

Get a deeper insight into testing a working React Native app example by reading the following series:

• Part 1: Jest – Snapshot come into play
• Part 2: Jest – Redux Snapshots for your Actions and Reducers.

Instalare

Starting from react-native version 0.38, a Jest setup is included by default when running npx @react-native-community/cli init. The following configuration should be automatically added to your React Native's jest.config.js file:

module.exports = {
  preset: 'react-native',
};

Run yarn test to run tests with Jest.

tip

If you are upgrading your react-native application and previously used the jest-react-native or react-native preset, remove the dependency from your package.json file and change the preset to react-native in jest.config.js instead.

Testarea de imagine

Let's create a snapshot test for a small intro component with a few views and text components and some styles:

Intro.js

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

class Intro extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>
          This is a React Native snapshot test.
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    flex: 1,
    justifyContent: 'center',
  },
  instructions: {
    color: '#333333',
    marginBottom: 5,
    textAlign: 'center',
  },
  welcome: {
    fontSize: 20,
    margin: 10,
    textAlign: 'center',
  },
});

export default Intro;

Acum haideţi să utilizăm procesorul de randare React şi funcționalitatea din Jest pentru testarea de imagine pentru a interacţiona cu componenta şi a captura rezultatul şi a crea un fişier de imagine:

caution

react-test-renderer is deprecated. We recommend using @testing-library/react-native for new tests.

__tests__/Intro-test.js

import React from 'react';
import renderer from 'react-test-renderer';
import Intro from '../Intro';

test('renders correctly', () => {
  const tree = renderer.create(<Intro />).toJSON();