render

Learn to render components with render.

What does render return?

render draws a component and returns a result object. This object holds query functions: getByText, getByTestId, getByPlaceholderText and more. The queries find elements in the rendered tree.

Typical usage: const { getByText } = render(<App />). Here getByText is taken from the result object with destructuring. Calling getByText('Hello') returns the element whose text is 'Hello'. If it cannot find it, it throws; this turns the test red. That is why getByText is used for text whose presence is certain.

The render result

The most common queries on the object returned by render are: getByText finds by text, getByTestId by the testID prop, and getByPlaceholderText by placeholder text. Each returns one element; if not found it throws.

You can run assertions like expect(el).toBeTruthy() on the element returned by a query. Sometimes a query can match several elements; in that case getAllByText is used and returns an array. When writing tests pick the most stable query: text can change but testID stays. That is why production prefers testID.

Exercise Use a query with render

An App component is already defined; it returns <Text>Hello</Text>. Call render(<App />); take getByText from the result. Find the element with getByText('Hello') and assert with expect(...).toBeTruthy().

Show example solution

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

function App() {
  return <Text>Hello</Text>;
}

test("hello exists", () => {
  const { getByText } = render(<App />);
  expect(getByText("Hello")).toBeTruthy();
});

Test yourself

Take a query from the render result

const { ____ } = render(<App />);

Show answer

const { getByText } = render(<App />);

Where does render run?
```
const { getByText } = render(<App />);
```
- In the browser
- On the device
- In production
- In a test environment
Show answer

In a test environment — render runs in a JavaScript test environment.
Match each query to its role

getByText

Finds by text
getByTestId

Finds by testID
getByPlaceholderText

Finds by placeholder
getAllByText

Finds all matches

Next lesson: getByText

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies