Configuration

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Configuration de votre projet

L'API de React Native Testing Library fonctionne immédiatement pour la plupart des tests. Tous les extraits de code présents sur le site fonctionnent sans configuration supplémentaire, à condition d'utiliser Jest et une version relativement récente de React Native.

Rendu personnalisé

Il est souvent utile de définir une méthode de rendu personnalisée incluant des éléments tels que des fournisseurs de contexte globaux, des magasins de données, etc. Pour la rendre disponible globalement, une approche consiste à créer un fichier utilitaire qui réexporte tout depuis React Native Testing Library. Vous pouvez remplacer React Native Testing Library par ce fichier dans tous vos imports. Consultez la section ci-dessous pour savoir comment rendre votre fichier d'utilitaires de test accessible sans utiliser de chemins relatifs.

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}

Configurer Jest avec des utilitaires de test

Pour importer votre fichier de test personnalisé sans utiliser de chemins relatifs (../../test-utils), ajoutez son dossier à l'option moduleDirectories de Jest.

Cela rendra tous les fichiers .js du dossier test-utils importables sans ../.

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