Configuración

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Configuración de tu proyecto

La API de React Native Testing Library debería funcionar inmediatamente en la mayoría de pruebas. Todos los fragmentos de código que encontrarás en el sitio web funcionan sin configuración adicional, asumiendo que usas Jest y una versión relativamente reciente de React Native.

Renderizado personalizado

Suele ser útil definir un método de renderizado personalizado que incluya elementos como proveedores de contexto global, almacenes de datos, etc. Para que esto esté disponible globalmente, un enfoque es crear un archivo de utilidades que reexporte todo desde React Native Testing Library. Puedes reemplazar React Native Testing Library con este archivo en todas tus importaciones. Consulta más abajo para conocer una forma de acceder a tu archivo de utilidades de prueba sin usar rutas relativas.

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}

Configuración de Jest con utilidades de prueba

Para que tu archivo de pruebas personalizado sea accesible en tus archivos de prueba de Jest sin usar importaciones relativas (../../test-utils), añade la carpeta que contiene el archivo a la opción moduleDirectories de Jest.

Esto permitirá importar todos los archivos .js en el directorio test-utils sin usar ../.

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