Summary - Testing
- React Native course
- Intermediate
- Lesson 99/116
- 5 min
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.
Practice 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'.
Starter code
// Import render and fireEvent
// Write a test named 'goes up'
// render App, press 'Up' button with fireEvent.press, check '1' with getByTextSample solution
import { render, fireEvent } from "@testing-library/react-native";
test("goes up", () => {
const { getByText } = render(<App />);
fireEvent.press(getByText("Up"));
expect(getByText("1")).toBeTruthy();
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which simulates a button press?
fireEvent.???(button);- render
- getByText
- fireEvent Correct answer
- expect
Explanation: fireEvent.press simulates a button press.
2 Match each tool to its purpose
| Term | Meaning |
|---|---|
Jest |
Runs tests |
RNTL |
Renders components |
render |
Returns queries |
getByText |
Finds by text |
fireEvent |
Simulates events |
3 RNTL import
import { render, fireEvent } from '____';import { render, fireEvent } from '@testing-library/react-native';Explanation: RNTL is imported from this package.