Document tools/libraries used in setting up unit testing

[temitopeakinsoto]

Write a brief documentation of the framework and other tools/libraries used in setting up unit testing for the React-native tutorial app

[temitopeakinsoto]

Facebook uses Jest to test React Native applications. So, the above assertion libraries and matchers were chosen because they are easy-to-use and also conveniently work with Jest - which already comes straight a react native scaffold.

For the React-native tutorial app, Jest, coupled with the following testing libraries/jest matchers were used for writing unit tests:

• @testing-library/jest-native: The jest-native library provides a set of custom, react-native-specific jest matchers that you can use to extend jest. These will make our tests more declarative, clear to read and to maintain. Jest-native has only been tested to work with RNTL.
• @testing-library/react-native: The React Native Testing Library (RNTL) is a lightweight solution for testing React Native components. It provides light utility functions on top of react-test-renderer, in a way that encourages better testing practices.

Steps for testing a component or piece of UI (e.g component)

• Create a new test file (e.g exampleUI-test.js). From within the exampleUI-test.js file.
• From within exampleUI-test.js file, write the following import statements:
  • import React from 'react';
  • import ExampleUI from 'path/to/ExampleUI';
  • import * as rtl from '@testing-library/react-native';
  • import '@testing-library/jest-native/extend-expect';
  • import renderer from 'react-test-renderer';

• Write test assertions, take snapshots etc as desired.

  Here's an example for testing out react-native component

    // ExampleUI component to be tested
    import React from 'react';
    import {StyleSheet, Text, View} from 'react-native';  

    Function ExampleUI() {
      return (
       <View testID="container" style={styles.container}>
        <Text testID="welcome" style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>
          This is an example React Native UI component 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; 

    // __tests__/exampleUI-test.js
   import React from 'react';
   import renderer from 'react-test-renderer';
   import ExampleUI from '/path/to/ExampleUI';

   test('takes snaptshot of ExampleUI ', () => {
      const tree = renderer.create(<Intro />).toJSON();
      expect(tree).toMatchSnapshot();
   });
   test('ExampleUI renders correctly', () => {
     const { queryByTestId } = rtl.render(<DetailsView />); 
     expect(queryByTestId('container')).toBeDefined();   
   });
   test('ExampleUI contains welcome message', () => {
     const { queryByTestId } = rtl.render(<DetailsView />); 
     expect(queryByTestId('welcome')).toBeDefined(); 
     expect(queryByTestId('welcome')).not.toBeEmpty();
     expect(queryByTestId('welcome')).toHaveTextContent('Welcome to React Native!');   
   });

Check out the following resources to gain a deeper insight into testing a working React Native app:

• [1: Jest – Snapshot come into play] (https://callstack.com/blog/testing-react-native-with-the-new-jest-part-1-snapshots-come-into-play/)
• Part 2: Jest – Redux Snapshots for your Actions and Reducers
• https://www.npmjs.com/package/@testing-library/react-native
• https://testing-library.com/docs/react-native-testing-library/intro/
• https://jestjs.io/docs/en/getting-started

[temitopeakinsoto]

CC: @princiya @PragatiVerma18 @StuffByLiang

[princiya]

Thank you @temitopeakinsoto 👍