Testowanie Twoich treści

Ten przewodnik pokazuje, jak automatycznie weryfikować kompletność słowników, wykrywać brakujące tłumaczenia przed wdrożeniem oraz testować zlokalizowany interfejs użytkownika w Twojej aplikacji.

Co możesz testować

• Brakujące tłumaczenia: przerwij CI, jeśli w którymkolwiek słowniku brakuje wymaganych lokalizacji.
• Renderowanie zlokalizowanego UI: renderuj komponenty z określonym dostawcą lokalizacji i sprawdzaj widoczny tekst/atrybuty.
• Audyt w czasie budowania: uruchom npx intlayer content test lokalnie lub w CI; kończy się kodem innym niż zero, gdy brakuje wymaganych tłumaczeń.

Szybki start: audyt przez CLI

Uruchom audyt z katalogu głównego projektu:

npx intlayer content test

Przydatne flagi:

• --env-file [ścieżka]: załaduj zmienne środowiskowe z pliku.
• -e, --env [nazwa]: wybierz profil środowiska.
• --base-dir [ścieżka]: ustaw katalog bazowy aplikacji do rozwiązywania ścieżek.
• --verbose: pokaż szczegółowe logi.
• --prefix [etykieta]: prefiksuj linie logów.
• --build [build]: zbuduj słowniki przed testowaniem, aby upewnić się, że zawartość jest aktualna. True wymusi budowanie, false pominie budowanie, undefined pozwoli użyć cache budowania.

Polecenie kończy się kodem 1, gdy brakuje dowolnej wymaganej lokalizacji (zobacz requiredLocales w konfiguracji), a 0 w przeciwnym razie. Możesz użyć go bezpośrednio, aby przerwać zadania CI lub hooki commitów. Test programowy poniżej jest opcjonalną alternatywą.

Test programowy (Vitest/Jest)

Użyj API Intlayer CLI, aby sprawdzić, czy nie brakuje tłumaczeń dla wymaganych lokalizacji.

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

describe("translations", () => {
  it("has no missing required locales", async () => {
    const result = await listMissingTranslations();

    if (result.missingRequiredLocales.length > 0) {
      // Przydatne, gdy test nie przejdzie lokalnie lub w CI
      console.log(result.missingTranslations);
    }

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

Odpowiednik w Jest:

import { listMissingTranslations } from "intlayer/cli";

test("nie ma brakujących wymaganych lokalizacji", async () => {
  const result = await listMissingTranslations();

  if (result.missingRequiredLocales.length > 0) {
    // Przydatne, gdy test nie przejdzie lokalnie lub w CI
    console.log(result.missingTranslations);
  }

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

Jak to działa:

• Intlayer odczytuje Twoją konfigurację (locales, requiredLocales) oraz zadeklarowane słowniki, a następnie raportuje:
  • missingTranslations: dla każdego klucza, które lokalizacje są brakujące i z którego pliku.
  • missingLocales: zbiór wszystkich brakujących lokalizacji.
  • missingRequiredLocales: podzbiór ograniczony do requiredLocales (lub wszystkich lokalizacji, jeśli requiredLocales nie jest ustawione).

Testowanie lokalizowanego UI (React / Next.js)

Renderuj komponenty w ramach providera Intlayer i sprawdzaj widoczną zawartość.

Przykład React (Testing Library):

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

test("renderuje lokalizowany tytuł w języku angielskim", () => {
  render(
    <IntlayerProvider locale="en-US">
      <MyComponent />
    </IntlayerProvider>
  );

  expect(screen.getByText("Expected English title")).toBeInTheDocument();
});

Przykład Next.js (App Router): użyj wrappera frameworka:

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

test("renders localized heading in French", () => {
  render(
    <IntlayerClientProvider locale="fr-FR">
      <MyPage />
    </IntlayerClientProvider>
  );
  expect(
    screen.getByRole("heading", { name: "Titre attendu" })
  ).toBeInTheDocument();
});

Wskazówki:

• Gdy potrzebujesz surowych wartości tekstowych dla atrybutów (np. aria-label), uzyskaj dostęp do pola .value zwracanego przez useIntlayer w React.
• Przechowuj słowniki razem z komponentami, aby ułatwić testy jednostkowe i sprzątanie.

Continuous Integration

Uruchom audyt CLI w CI. Przerywa zadanie, gdy brakuje wymaganych tłumaczeń.

package.json:

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

Alternatywa: Vitest

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

Przykład 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

Opcjonalnie: uruchom audyt CLI, aby uzyskać czytelne podsumowanie wraz z testami:

npx intlayer content test --verbose

Rozwiązywanie problemów

• Upewnij się, że Twoja konfiguracja Intlayer definiuje locales oraz (opcjonalnie) requiredLocales.
• Jeśli Twoja aplikacja korzysta z dynamicznych lub zdalnych słowników, uruchamiaj testy w środowisku, gdzie słowniki są dostępne.
• W przypadku mieszanych monorepo, użyj --base-dir, aby wskazać CLI właściwy katalog główny aplikacji.