DEV Community

Cover image for Unit Testing Components with Jest in React Native. Approaches
Daniil Sitdikov
Daniil Sitdikov

Posted on

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}
/>
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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).

A huge snapshot

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();
});
Enter fullscreen mode Exit fullscreen mode

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>)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)