Passer au contenu principal

Assistants dans les tests Jutro

Le package @jutro/test fournit une fonctionnalité qui facilite la rédaction de tests Jutro.

Bibliothèque de tests​

Jutro encapsule des utilitaires de bibliothèque de test pour que vous puissiez les importer directement à partir de @jutro/test. Cela inclut :

  • @testing-library/react

Vous pouvez les importer en tant que :

import { screen } from '@jutro/test';
import userEvent from '@testing-library/user-event';

Applications auxiliaires​

rendu​

import { render, screen } from '@jutro/test';

render(<MyComponent />);
expect(screen.getByRole('heading')).toBeInTheDocument();

Un wrapper Jutro autour du rendu de la bibliothèque de tests.

Vous pouvez fournir des options de rendu comme deuxième argument de render(). Les fournisseurs suivants sont affichés par défaut :

  • router
  • globalization
  • modalNext
  • theme
  • breakpointTracker

Pour chaque fournisseur, vous pouvez :

  • le remplacer par un autre fournisseur (doit être un fournisseur de contexte)
  • transmettre des propriétés à un fournisseur existant
  • désactiver un fournisseur

Par exemple :

render(<CurrencyInput {...currencyInputProps} />, {
  providers: {
    theme: {
      disable: true,
    },
    router: {
      provider: HashRouterContext.Provider,
    },
    globalization: {
      props: {
        defaultLocale: 'ja-JP',
      },
    },
  },
});

React Strict Mode​

Le mode React Strict est un composant React natif qui exécute des vérifications supplémentaires lorsqu'il est activé dans un environnement de développement, ce qui vous aide à trouver les bogues couramment rencontrés dans vos composants. Il offre les avantages suivants :

  • Il vérifie toute utilisation d'API obsolètes par vos composants
  • Il effectue un nouveau rendu de vos composants une fois de plus pour essayer de trouver les composants qui modifient involontairement leur comportement lorsqu'ils sont affichés une seconde fois
  • Il réexécute un cycle de configuration et de nettoyage supplémentaire pour tous les effets de votre code

Pour activer le mode React Strict, dans votre fichier .env, ajoutez JUTRO_REACT_STRICT_MODE=true.

Le mode strict n'est pas activé par défaut pour les applications préexistantes, mais la variable d'environnement sera activée dans le fichier .env pour toutes les nouvelles applications Jutro créées à partir d'un modèle d'application Jutro.

translatorForTests​

  • key : la forme du message à traduire, ou chaîne
  • args : un objet d'arguments transmis au message de localisation pour afficher des valeurs de variable

Si key est dans le format intlMessageShape, il ajoute Tx: à la valeur du champ defaultMessage.

Si key est une chaîne, elle renvoie la key.

translatorForTestsWithSuffix​

Identique à translatorForTests, mais ajoute -translated à la fin de chaque message.

getTranslation​

import { screen, getTranslation } from '@jutro/test';

const languageLabel = screen.getByText(
  getTranslation({
    id: 'my-app.widgets.SomeComponent.languageLabel',
    defaultMessage: 'Language',
  })
);
  • input : la forme du message à traduire, ou chaîne
  • args : un objet d'arguments transmis au message de localisation pour afficher des valeurs de variable

Si input est dans le format intlMessageShape, il renvoie la valeur formatée du champ defaultValue.

Si input est une chaîne, elle renvoie la chaîne.

flushPromises​

Vous pouvez utiliser cette fonction pour attendre la fin des opérations asynchrones. Par exemple, dans une fonction de test async :

await flushPromises();
expect(everythingIsFineNow());

Dans la plupart des cas, cela n'est pas nécessaire. Avant d'utiliser flushPromises, essayez les méthodes suivantes à partir de la bibliothèque de tests :

convertToUTCObject​

const year = convertToUTCObject(date).year;

Convertit un Date en un objet avec les champs suivants :

  • Année
  • Mois
  • Jour
  • Heure
  • Minute

convertToUTCString​

const utcSting = convertToUTCString(date);

Convertit un objet Date en une chaîne au format UTC qui contient l'année, le mois, le jour, l'heure et la minute.

convertToUTCDate​

const properDate = convertToUTCDate(date);

Convertit un objet Date en un objet de date UTC.

getLocaleTestData​

const testData = getLocaleTestData(category, options);
  • category : peut être « date », « numéro » ou « devise »
  • options : un objet d'options :
    • excludeValues : string[]

Renvoie les données de paramètres régionaux de la catégorie donnée pour chaque paramètre régional pris en charge.

Assertions​

assertIsInput​

const input = screen.getByRole('switch', { name: label });
assertIsInput(input);

Génère une erreur si input n'est pas une entrée HTML.

assertIsAnchor​

const link = screen.getByRole('link');
assertIsAnchor(link);

Génère une erreur si link n'est pas un ancrage HTML.

const link = screen.getByRole('link');
assertIsLink(link);

Génère une erreur si link n'est pas un lien HTML.

assertIsElement​

const link = screen.getByRole('link');
assertIsElement(link);

Génère une erreur si link n'est pas un élément HTML.

assertIsNotNull​

const titleContent = screen.getByRole('heading').textContent;
assertIsNotNull(titleContent);

Génère une erreur si titleContent est nul.