Unit Testing Components with Jest in React Native. Approaches

If you are interested in technical details, how it integrates into the project and common problems resolutions: read this article.

I've used react-native-testing-library. It has similar API as react-testing-library but includes fewer abilities. A full API is located here.

Let's get started with a simple example:

1. A user inputs some title
2. A component finds 1 the most relevant item.

<Search
    testID='search-input'
    value={searchQuery}
    onChangeText={this.onSearchQueryChanged}
/>

^{In this article, I don't use the unnecessary code (such as the whole component, logic of the filter, etc.)}

There are 2 approaches to testing:

Snapshots

it('should rerender component with filtered panels after search text input has been changed', () => {
    const { toJSON, getByTestId } = render(
       <Provider store={store}>
            <Cars {...props} />
        </Provider>
    );

    fireEvent.changeText(getByTestId('search-input'), 'Porsche Macan');

    expect(toJSON()).toMatchSnapshot();
});

Advantages:

• Good reliability. It covers the whole state of component: makeup, small details, etc.

Disadvantages:

• It could be huge like in an example below, and it's hard to find and change something (if business-requirements has been changed and you wanna update your snapshot for next test-driven development).

Query

It finds a node or list of nodes in the tree of some component.

it('should rerender component with filtered panels after search text input has been changed', () => {
    const { toJSON, getByTestId } = render(
        <Provider store={store}>
            <Cars {...props} />
        </Provider>
    );

    fireEvent.changeText(getByTestId('search-input'), 'Porsche Macan');

    expect(queryByText('Porsche Macan S 2019, London')).toBeTruthy();
});

^{An example of testing by node's content}

Advantages:

• It looks like more as specification and easy to read and understand
• It's ready for use for TDD

Disadvantages:

• It's a very small point of testing, and it can't guarantee that bugs in the resulting state of the component will be found.

There is a full API (at the moment of writing the article, 2019) of query functions:

queryByName: (name: React.ReactType | string)
queryByType: <P>(type: React.ComponentType<P>)
queryByText: (name: string | RegExp)
queryByPlaceholder: (placeholder: string | RegExp)
queryByProps: (props: Record<string, any>)
queryByTestId: (testID: string)
queryAllByName: (name: React.ReactType | string)
queryAllByType: <P>(type: React.ComponentType<P>)
queryAllByText: (text: string | RegExp)
queryAllByPlaceholder: (placeholder: string | RegExp)
queryAllByProps: (props: Record<string, any>)