#render API

#render function

async function render<T>(
  element: React.ReactElement<T>,
  options?: RenderOptions
): Promise<RenderResult>;

The render function is the entry point for writing React Native Testing Library tests. It deeply renders the given React element and returns helpers to query the output. The function is async and uses async act internally, so all pending React updates run before it resolves. This works with async React features like Suspense boundaries and the use() hook.

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

test('basic test', async () => {
  await render(<MyApp />);
  expect(screen.getAllByRole('button', { name: 'start' })).toBeOnTheScreen();
});

When using React context providers like Redux Provider, you'll likely want to wrap the rendered component with them. In such cases, create your own custom render method. Follow this guide on how to set it up.

#Options

You can customize the render method by passing options as the second argument:

#wrapper

wrapper?: React.ComponentType<any>,

Wraps the tested component in an additional wrapper component. Use this to create custom render functions for common React Context providers.

#createNodeMock

createNodeMock?: (element: React.ReactElement) => object,

Passes createNodeMock to the renderer's create() method for custom mock refs. This option is passed through to Test Renderer.

#Result

The render function returns a promise that resolves to the same queries and utilities as the screen object. Use screen for queries and the lifecycle methods from the render result when needed.

See this article from Kent C. Dodds for more details.