Unit Testing with React Native
π‘ What you will learn
- Write maintainable unit tests with good testing practices
- Use React Native Testing Library (
RNTL
) βa lightweight solution for testing React Native components
πΎ Before we start the exercise
Unit tests cover the smallest parts of code, like individual functions or components.
We are writing unit tests to avoid regressions over time. Creating a brand new app is easy, maintaining it over time is way more complex.
RNTL
is a very light-weight solution for testing without all the implementation details. The main utilities it provides involve querying for nodes similarly to how users would find them. In this way, testing-library helps ensure your tests give you confidence in your UI code.
- Check
RNTL
documentation
How to write your first test
The main concept is to test how your user will "see" your application and ensure your component renders correctly.
Here's an example of a *.test.tsx
file:
describe('', () => {
it('', () => {
});
});
Adding description
We will test if Header.test.tsx
renders correctly:
// Header.test.tsx
describe('Header', () => {
it('renders correctly', () => {
});
});
You need to render
the component you want to test with props
declaration.
The first time you can use debug()
to print rendered component.
// Header.test.tsx
import { render } from "@testing-library/react-native";
import React from "react";
import { Header } from "~/components/Header";
describe("Header", () => {
it("renders correctly", () => {
const { debug } = render(<Header title="SpaceCraft" />);
debug();
});
});
Automatically detect if text is rendered
getByText
is the method used to find any visible text on interactive and non-interactive elements βlike a user will "see" our component.
// Header.test.tsx
import { render } from "@testing-library/react-native";
import React from "react";
import { Header } from "~/components/Header";
describe("Header", () => {
it("renders correctly", () => {
const { getByText } = render(<Header title="SpaceCraft" />);
getByText("SpaceCraft");
});
});
Check if your test are passing with yarn test
.
π¨βπ Exercise 5
Setup React Native Testing Library
- Install
@testing-library/react-native
on your project.
Hint: if you need some help, you can have a look at this diff
It's time to write your first test but fist you need to double check if Jest is working properly from the terminal
- Create a new file called
hello.test.ts
and paste this working test
// ./src/utils/hello.test.ts
it("works", () => {
expect(1).toBe(1);
});
When you run yarn test
you should have this result
yarn run v1.22.17
$ jest
PASS src/utils/hello.test.ts
Test Suites: 3 passed, 3 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 7.029 s
Ran all test suites.
β¨ Done in 16.14s.
Test Driven Developement Workflow
Let's now create a workflow to quickly add units tests on your codebase.
- update
package.json
with a param to watch the file we change
// package.json
"test": "jest",
"test:unit:watch": "jest --watch"
- Create some unit tests files