Passer au contenu principal

Modèles dans RTL

Vous trouverez ci-dessous quelques modèles courants dans RTL. Notez que ces exemples ne constituent pas un code complet et qu'ils sont susceptibles de ne pas fonctionner dans tous les cas de figure.

Organisation​

Le rendu de base est obtenu en remplaçant les fonctions mount ou shallow par la fonction render. Vous devez importer la fonction render à partir du package @jutro/test.

render(<Component />);

L'exemple ci-dessous montre TranslatorProvider, mais ModalNextProvider, ThemeProvider, BreakpointTrackerProvider et router sont également inclus.

render(<Component />);

Lors de la transmission de propriétés dans un contexte, vous devez spécifier un deuxième argument pour render qui intègre des options de rendu. La liste complète des options peut être consultée ici.

Vous pouvez également configurer des fournisseurs de contexte à l'aide de la variable providers, comme indiqué ci-dessous. Vous pouvez transmettre des propriétés au fournisseur, désactiver le fournisseur ou le remplacer par votre propre fournisseur personnalisé. Il existe cinq fournisseurs que vous pouvez configurer :

  • router
  • globalization
  • modalNext
  • theme
  • breackpointTracker
render(<Component />, {
  providers: {
    globalization: {
      props: {
        defaultLocale: someLocale,
      },
    },
  },
});

Simulation​

Il est facile de simuler un événement de clic dans RTL :

userEvent.click(button);

La simulation de la saisie d'une valeur dans un champ est beaucoup plus simple dans RTL. La fonction userEvent.clear efface le champ et la fonction userEvent.type y saisit des caractères. Reportez-vous à la userEvent documentation pour en savoir plus sur l'utilitaire userEvent.

userEvent.clear(input);
userEvent.type(input, 'myValue{enter}');

Il n'existe aucun moyen dans RTL de focaliser ou de brouiller directement un élément donné, mais vous pouvez facilement émuler une pression sur une touche « Tab ».

Note : Cela ne fonctionne que si le bouton est le premier élément focalisable de la page. S'il s'agit du deuxième élément focalisable, trois pressions sur la touche de tabulation seront nécessaires : deux pour focaliser le bouton et une troisième pour le flouter.

userEvent.tab();
userEvent.tab();

Assertion​

Comment vérifier si une entrée a la valeur souhaitée :

expect(screen.getByRole('textbox')).toHaveValue('foo');

Comment vérifier si un bouton existe et s'il a été correctement traduit aria-label :

const myButton = screen.getByLabelText(getTranslation(messageProps.myBtnLabel));

expect(myButton).toBeInTheDocument();

L'exemple suivant montre que les assertions sont identiques lors de l'utilisation de maquettes. La seule différence réside dans le code d'action :

const callbackSpy = jest.fn();

// some actions happen

expect(callbackSpy).toHaveBeenCalledWith(
  newValue,
  undefined,
  expect.anything()
);

L'outil de mise en correspondance className porte un nom différent dans @testing-library/jest-dom. Vous pouvez trouver la liste de tous les outils de mise en correspondance disponibles ici.

expect(element).toHaveClass('someClass');

Comment vérifier si un élément avec un texte donné existe :

expect(screen.getByText(getTranslation('myText'))).toBeInTheDocument();

Comment vérifier si une case est cochée :

const checkbox = screen.getByRole('checkbox');

expect(checkbox).toBeChecked();

Le code suivant montre comment vérifier si l'entrée est désactivée pour des raisons d'accessibilité. Notez que .toBeDisabled() ne peut pas être utilisé ici car il ne tient pas compte de la présence ou de l'absence de l'attribut aria-disabled.

expect(input).toHaveAttribute('aria-disabled', 'true');
On this page