Tester votre contenu

Ce guide montre comment vérifier automatiquement que vos dictionnaires sont complets, détecter les traductions manquantes avant la mise en production, et tester l’interface localisée dans votre application.

Ce que vous pouvez tester

• Traductions manquantes : échouer le CI si des locales requises manquent dans un dictionnaire.
• Rendu de l’interface localisée : afficher des composants avec un fournisseur de locale spécifique et vérifier le texte/attributs visibles.
• Audits au moment de la compilation : exécuter npx intlayer content test localement ou en CI ; la commande renvoie un code non nul lorsque des traductions requises sont manquantes.

Démarrage rapide : audit via CLI

Lancez l’audit depuis la racine de votre projet :

npx intlayer content test

Options utiles :

• --env-file [path] : charger les variables d’environnement depuis un fichier.
• -e, --env [name] : sélectionner un profil d’environnement.
• --base-dir [path] : définir le répertoire de base de l’application pour la résolution.
• --verbose : afficher les logs détaillés.
• --prefix [label] : préfixer les lignes de log.

La commande renvoie le code 1 lorsqu’une locale requise est manquante (voir requiredLocales dans votre configuration), et 0 sinon. Vous pouvez l’utiliser directement pour faire échouer des jobs CI ou des hooks de commit. Le test programmatique ci-dessous est une alternative optionnelle.

Test programmatique (Vitest/Jest)

Utilisez l’API CLI d’Intlayer pour vérifier qu’il n’y a pas de traductions manquantes pour vos locales requises.

/* @vitest-environment node */
import { listMissingTranslations } from "intlayer/cli";
import { describe, expect, it } from "vitest";

describe("traductions", () => {
  it("n’a pas de locales requises manquantes", () => {
    const result = listMissingTranslations();

    if (result.missingRequiredLocales.length > 0) {
      // Utile lorsque le test échoue localement ou en CI
      console.log(result.missingTranslations);
    }

    expect(result.missingRequiredLocales).toHaveLength(0);
  });
});

Équivalent Jest :

import { listMissingTranslations } from "intlayer/cli";

test("n’a pas de locales requises manquantes", () => {
  const result = listMissingTranslations();

  if (result.missingRequiredLocales.length > 0) {
    console.log(result.missingTranslations);
  }

  expect(result.missingRequiredLocales).toHaveLength(0);
});

Comment ça fonctionne :

• Intlayer lit votre configuration (locales, requiredLocales) et les dictionnaires déclarés, puis rapporte :
  • missingTranslations : pour chaque clé, quelles locales sont manquantes et dans quel fichier.
  • missingLocales : l’union de toutes les locales manquantes.
  • missingRequiredLocales : sous-ensemble limité aux requiredLocales (ou toutes les locales si requiredLocales n’est pas défini).

Tester une interface localisée (React / Next.js)

Rendez les composants sous un fournisseur Intlayer et vérifiez le contenu visible.

Exemple React (Testing Library) :

import { IntlayerProvider } from "react-intlayer/client";
import { render, screen } from "@testing-library/react";
import { MyComponent } from "./MyComponent";

test("renders localized title in English", () => {
  render(
    <IntlayerProvider locale="en-US">
      <MyComponent />
    </IntlayerProvider>
  );

  expect(screen.getByText("Titre anglais attendu")).toBeInTheDocument();
});

Exemple Next.js (App Router) : utilisez le wrapper du framework :

import { IntlayerClientProvider } from "next-intlayer/client";
import { render, screen } from "@testing-library/react";
import { MyPage } from "./MyPage";

test("affiche le titre localisé en français", () => {
  render(
    <IntlayerClientProvider locale="fr-FR">
      <MyPage />
    </IntlayerClientProvider>
  );
  expect(
    screen.getByRole("heading", { name: "Titre attendu" })
  ).toBeInTheDocument();
});

Conseils :

• Lorsque vous avez besoin des valeurs brutes des chaînes pour des attributs (par exemple, aria-label), accédez au champ .value retourné par useIntlayer dans React.
• Gardez les dictionnaires proches des composants pour faciliter les tests unitaires et le nettoyage.

Intégration Continue

Exécutez l’audit CLI en CI. Il fait échouer le job lorsque des traductions requises sont manquantes.

package.json :

{
  "scripts": {
    "test:i18n": "npx intlayer content test"
  }
}

Alternative : Vitest

{
  "scripts": {
    "test:i18n": "vitest run"
  }
}

Exemple GitHub Actions :

name: CI
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx intlayer content test

Optionnel : lancez l'audit CLI pour un résumé lisible par un humain en parallèle des tests :

npx intlayer content test --verbose

Dépannage

• Assurez-vous que votre configuration Intlayer définit locales et (optionnellement) requiredLocales.
• Si votre application utilise des dictionnaires dynamiques ou distants, exécutez les tests dans un environnement où les dictionnaires sont disponibles.
• Pour les monorepos mixtes, utilisez --base-dir pour indiquer au CLI la racine correcte de l'application.