#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 components' structure. This function is async by default and uses async act internally to ensure all pending React updates are executed during rendering, making it compatible with async React features like Suspense boundary or 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 rendered component with them. In such cases, it's convenient to create your own custom render method. Follow this great guide on how to set this up.

#Options

The behavior of the render method can be customized by passing various options as a second argument of the RenderOptions type:

#wrapper

wrapper?: React.ComponentType<any>,

This option allows you to wrap the tested component, passed as the first option to the render() function, in an additional wrapper component. This is useful for creating reusable custom render functions for common React Context providers.

#createNodeMock

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

This option allows you to pass createNodeMock option to the renderer's create() method in order to allow 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. We recommend using the screen object for queries and the lifecycle methods from the render result when needed.

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