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:
- A user inputs some title
- 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>)
Top comments (0)