Summary - Testing

Combine Jest, RNTL and fireEvent to write a component test.

Summary - Testing

In this group you learned the foundation of React Native testing. Jest runs tests and provides test and expect. RNTL renders components in a test environment. render draws a component and returns query functions.

getByText finds the element with matching text; it throws when missing. fireEvent simulates user events through methods like press and changeText. With these five you write solid tests that check real behavior. Jest gives red/green reports; RNTL renders, queries find, fireEvent interacts.

Exercise Write a full test

An App component is already defined; pressing the button raises a counter. Render with render(<App />). Press with fireEvent.press(getByText('Up')). Assert with expect(getByText('1')).toBeTruthy(). Test name is 'goes up'.

Show example solution

import { render, fireEvent } from "@testing-library/react-native";

test("goes up", () => {
  const { getByText } = render(<App />);
  fireEvent.press(getByText("Up"));
  expect(getByText("1")).toBeTruthy();
});

Test yourself

Which simulates a button press?
```
fireEvent.???(button);
```
- render
- getByText
- fireEvent
- expect
Show answer

fireEvent — fireEvent.press simulates a button press.
Match each tool to its purpose

Jest

Runs tests
RNTL

Renders components
render

Returns queries
getByText

Finds by text
fireEvent

Simulates events

RNTL import

import { render, fireEvent } from '____';

Show answer

import { render, fireEvent } from '@testing-library/react-native';

Next lesson: Flipper

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies