Unit Testing Components with Jest in React Native. Approaches
Tags: reactnative, testing, react, jest
Published: 2023-04-07 13:04:11

If you are interested in technical details, how it integrates into the project and common problems resolutions: [read this article](https://medium.com/@dsitdikov/unit-testing-components-with-jest-in-react-native-setup-and-trouble-resolutions-ad2d2e3f909d).

I've used [react-native-testing-library](https://github.com/callstack/react-native-testing-library). It has similar API as react-testing-library but includes fewer abilities. [A full API is located here.](https://callstack.github.io/react-native-testing-library/docs/api)

Let's get started with a simple example:

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

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

<sup>In this article, I don't use the unnecessary code (such as the whole component, logic of the filter, etc.)</sup>

There are 2 approaches to testing:

# Snapshots

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


![A huge snapshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmxa2n27c22e7ssqinye.gif)

# Query

It finds a node or list of nodes in the tree of some component.
```jsx
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();
});
```
<sup>An example of testing by node's content</sup>

**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:
```typescript
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>)
```