Testen Ihres Inhalts

Dieser Leitfaden zeigt, wie Sie automatisch überprüfen können, ob Ihre Wörterbücher vollständig sind, fehlende Übersetzungen vor der Veröffentlichung erkennen und die lokalisierte Benutzeroberfläche in Ihrer App testen.

Was Sie testen können

• Fehlende Übersetzungen: CI schlägt fehl, wenn für ein Wörterbuch erforderliche Sprachversionen fehlen.
• Lokalisierte UI-Darstellung: Komponenten mit einem bestimmten Sprachprovider rendern und sichtbaren Text/Attribute überprüfen.
• Build-Zeit Prüfungen: Führen Sie npx intlayer content test lokal oder in CI aus; der Befehl endet mit einem von Null verschiedenen Code, wenn erforderliche Übersetzungen fehlen.

Schnellstart: Prüfung über CLI

Führen Sie die Prüfung vom Projektstammverzeichnis aus durch:

npx intlayer content test

Nützliche Optionen:

• --env-file [Pfad]: lädt Umgebungsvariablen aus einer Datei.
• -e, --env [Name]: wählt ein Umgebungsprofil aus.
• --base-dir [Pfad]: legt das Basisverzeichnis der App für die Auflösung fest.
• --verbose: zeigt ausführliche Protokolle an.
• --prefix [Label]: fügt den Protokollzeilen ein Präfix hinzu.

Der Befehl endet mit dem Code 1, wenn eine erforderliche Sprachversion fehlt (siehe requiredLocales in Ihrer Konfiguration), andernfalls mit 0. Sie können ihn direkt verwenden, um CI-Jobs oder Commit-Hooks fehlschlagen zu lassen. Der programmatische Test unten ist eine optionale Alternative.

Programmatischer Test (Vitest/Jest)

Verwenden Sie die Intlayer CLI API, um sicherzustellen, dass keine Übersetzungen für Ihre erforderlichen Sprachversionen fehlen.

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

describe("Übersetzungen", () => {
  it("hat keine fehlenden erforderlichen Sprachversionen", () => {
    const result = listMissingTranslations();

    if (result.missingRequiredLocales.length > 0) {
      // Hilfreich, wenn der Test lokal oder in CI fehlschlägt
      console.log(result.missingTranslations);
    }

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

Jest-Äquivalent:

import { listMissingTranslations } from "intlayer/cli";

test("hat keine fehlenden erforderlichen Sprachversionen", () => {
  const result = listMissingTranslations();

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

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

Wie es funktioniert:

• Intlayer liest Ihre Konfiguration (locales, requiredLocales) und deklarierte Wörterbücher aus und meldet dann:
  • missingTranslations: pro Schlüssel, welche Sprachversionen fehlen und aus welcher Datei.
  • missingLocales: Vereinigung aller fehlenden Sprachversionen.
  • missingRequiredLocales: Teilmenge beschränkt auf requiredLocales (oder alle Sprachversionen, wenn requiredLocales nicht gesetzt ist).

Testen der lokalisierten Benutzeroberfläche (React / Next.js)

Rendern Sie Komponenten unter einem Intlayer-Provider und prüfen Sie den sichtbaren Inhalt.

React-Beispiel (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("Erwarteter englischer Titel")).toBeInTheDocument();
});

Next.js (App Router) Beispiel: Verwenden Sie den Framework-Wrapper:

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

test("rendert lokalisierten Überschrift auf Französisch", () => {
  render(
    <IntlayerClientProvider locale="fr-FR">
      <MyPage />
    </IntlayerClientProvider>
  );
  expect(
    screen.getByRole("heading", { name: "Titre attendu" })
  ).toBeInTheDocument();
});

Tipps:

• Wenn Sie rohe Zeichenkettenwerte für Attribute benötigen (z. B. aria-label), greifen Sie auf das .value-Feld zu, das von useIntlayer in React zurückgegeben wird.
• Behalten Sie Wörterbücher in der Nähe der Komponenten für einfachere Unit-Tests und Bereinigung bei.

Kontinuierliche Integration

Führen Sie die CLI-Prüfung in CI aus. Sie lässt den Job fehlschlagen, wenn erforderliche Übersetzungen fehlen.

package.json:

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

Alternative: Vitest

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

GitHub Actions Beispiel:

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

Optional: Führen Sie die CLI-Prüfung für eine menschenlesbare Zusammenfassung neben den Tests aus:

npx intlayer content test --verbose

Fehlerbehebung

• Stellen Sie sicher, dass Ihre Intlayer-Konfiguration locales und (optional) requiredLocales definiert.
• Wenn Ihre Anwendung dynamische oder entfernte Wörterbücher verwendet, führen Sie die Tests in einer Umgebung aus, in der die Wörterbücher verfügbar sind.
• Für gemischte Monorepos verwenden Sie --base-dir, um die CLI auf das richtige Anwendungs-Stammverzeichnis zu verweisen.