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