セットアップ

プロジェクトの設定

React Native Testing Library APIは、ほとんどのテストでそのまま機能します。Webサイト全体で見つかるスニペットはすべて、Jestと比較的最近のReact Nativeを使用している場合、追加の構成なしで機能します。

カスタムレンダリング

グローバルコンテキストプロバイダやデータストアなどのものを含むカスタムレンダリングメソッドを定義すると、便利なことがよくあります。これをグローバルに利用できるようにするための1つのアプローチは、React Native Testing Libraryのすべてを再エクスポートするユーティリティファイルを定義することです。すべてのインポートで、React Native Testing Libraryをこのファイルに置き換えることができます。相対パスを使用せずに、テストユーティリティファイルにアクセスする方法については、以下を参照してください。

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}

Jestでテストユーティリティを構成する

相対インポート（../../test-utils）を使用せずに、Jestテストファイルでカスタムテストファイルにアクセスできるようにするには、ファイルを含むフォルダをJest moduleDirectoriesオプションに追加します。

これにより、test-utilsディレクトリ内のすべての.jsファイルが../なしでインポート可能になります。

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 ...
}