React Native – Testing (1)

How to run a test and update snapshot?

jest path_to_a_test_file -u

How to setup React Native testing?

reactnativetesting.io

• Install jest globally

npm install -g jest-cli

• Install @testing-library/react-native

$ yarn add --dev @testing-library/react-native

• Change .babelrc to babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'transform-inline-environment-variables',
      {
        include: ['SHOW_STORYBOOK'],
      },
    ],
  ],
}

• Add Jest plugin in VSCode

How to configure jest?

Cannot use import statement outside a module

• Add the error module into jest.config.js

transformIgnorePatterns: [
  'node_modules/(?!(@react-native|react-native|common|@me/library)/)'
]

Test file template

import React from 'react';
import { render } from '@testing-library/react-native';
import ErrorBoundary from '..';
import { Text } from 'react-native';

describe('ErrorBoundary', () => {
  describe('Rendering', () => {
    it('renders the children when there is no error', () => {
      const { getByText } = render(
        <ErrorBoundary>
          <Text>Hello World</Text>
        </ErrorBoundary>
      );

      expect(getByText('Hello World')).toBeDefined();
    });

    it('renders ErrorView when an error occurs', () => {
      const ThrowError = () => {
        throw new Error('Test error');
      }

      const { getByTestId } = render(
        <ErrorBoundary>
          <ThrowError />
        </ErrorBoundary>
      );

      expect(getByTestId('id-error-view')).toBeCalled;
    });
  })

  describe('Interaction', () => { })
});