设置

设置你的项目

React Native 测试库 API 应该适用于大多数测试的开箱即用。假设你使用 Jest 和一个比较新的 React Native 版本，那么你在网站上找到的所有代码片段都可以正常使用，无需任何额外的配置。

自定义渲染

定义一个包含全局上下文提供者、数据存储等内容的自定义渲染方法通常很有用。要使其在全局范围内可用，一种方法是定义一个重新导出 React Native 测试库 中所有内容的实用程序文件。你可以在所有导入中将 React Native 测试库 替换为此文件。有关使测试实用程序文件无需使用相对路径即可访问的方法，请参见 下面。

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

要使你的自定义测试文件在 Jest 测试文件中无需使用相对导入 (../../test-utils) 即可访问，请将包含该文件的文件夹添加到 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 ...
}