跳到主要内容

设置

设置你的项目​

React Native Testing Library 的 API 对大多数测试来说都是开箱即用的。如果你使用 Jest 和 React Native 的最新版本，你会在整个网站上发现所有的片段，无需任何额外配 置。

自定义渲染​

定义一个自定义的渲染方法，包括全局上下文提供者、数据存储等东西，往往是很有用的。 为了使其在全局范围内可用，一种方法是定义一个实用的文件，从 React Native Testing Library 中重新导出一切。你可以在你所有的导入中用这个文件 替换 React Native Testing Library。请 看下面的方法，使你的测试 util 文件可以 在不使用相对路径的情况下访问。

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}

使用 Test Utils 来配置 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 ...
}