Component Tests

Component Tests

Writing Unit Tests for Components

The Zustand 58,763 cart store (Query and Zustand) needs no rendering at all: __tests__/cart.test.ts clears it in beforeEach(), calls add(3) twice and add(5) once, and expects selectCount() to return 3. Keep tests in a root __tests__ folder, never in src/app, where Expo Router 6,418 would treat them as screens. A component test renders one component with chosen props, such as BookRow (Lists):

__tests__/BookRow.test.tsx (first test)JavaScript

import { render, screen, userEvent } from '@testing-library/react-native';
import BookRow from '../src/BookRow';
import { books } from '../src/books';
const salt = books[2];                              // Salt and Saffron, id 3
test('shows the title, author, genre and price', async () => {
  await render(<BookRow book={salt} />);
  expect(screen.getByText('Salt and Saffron')).toBeOnTheScreen();
  expect(screen.getByText(`${salt.author} · ${salt.genre}`)).toBeOnTheScreen();
  expect(screen.getByText('$24.00')).toBeOnTheScreen();
});

The first draft expected $22.00; the failure, Unable to find an element with text: $22.00, printed the rendered tree, with a Text holding the two children $ and 24.00. JSX split the price at {book.price.toFixed(2)}, yet getByText('$24.00') matches, because it compares a Text's joined content, as a reader sees it.

A snapshot test, expect(screen.toJSON()).toMatchSnapshot(), stores the whole tree and fails whenever it changes. BookNest's snapshot file is 105 lines of props and styles for a three-line row, and jest -u approves a change without a second look, so keep snapshots for small, stable components.

MENU