Edit

Setup

Setting up your project

The Native Testing Library API should work out of the box for most tests. All of the snippets you'll find throughout the website work without any additional configuration assuming you use Jest and a moderately recent version of React Native.

We strongly encourage you to use Jest with the @testing-library/react-native preset. The react-native preset should also work, but you'll be getting the best experience when using our preset. There may be some additional mocks you need to provide to such as mocks for react-native-gesture-handler when using react-navigation.

Custom Render

It's often useful to define a custom render method that includes things like global context providers, data stores, etc. To make this available globally, one approach is to define a utility file that re-exports everything from Native Testing Library. You can replace Native Testing Library with this file in all your imports. See below for a way to make your test util file accessible without using relative paths.

The example below sets up data providers using the wrapper option to render.

// my-component.test.js
- import { render, fireEvent } from '@testing-library/react-native';
+ import { render, fireEvent } from '../test-utils';

// test-utils.js
import { render } from '@testing-library/react-native'
import { ThemeProvider } from 'my-ui-lib'
import { TranslationProvider } from 'my-i18n-lib'
import defaultStrings from 'i18n/en-x-default'

const AllTheProviders = ({ children }) => {
  return (
    <ThemeProvider theme="light">
      <TranslationProvider messages={defaultStrings}>
        {children}
      </TranslationProvider>
    </ThemeProvider>
  )
}

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options })

// re-export everything
export * from '@testing-library/react-native'

// override render method
export { customRender as render }

Configuring Jest with Test Utils

To make your custom test file accessible in your Jest test files without using relative imports (../../test-utils), add the folder containing the file to the Jest moduleDirectories option.

This will make all the .js files in the test-utils directory importable without ../.

// my-component.test.js
- import { render, fireEvent } from '../test-utils';
+ import { render, fireEvent } from 'test-utils';

// jest.config.js
module.exports = {
  moduleDirectories: [
    'node_modules',
+   // add the directory with the test-utils.js file, for example:
+   'utils', // a utility folder
+    __dirname, // the root directory
  ],
  // ... other options ...
}