Тестування вашого контенту

Цей посібник показує, як автоматично перевіряти повноту ваших словників, виявляти відсутні переклади до релізу та тестувати локалізований UI у вашому додатку.

Що ви можете перевірити

• Відсутні переклади: провалювати CI, якщо для будь-якого словника відсутні обов'язкові локалі.
• Локалізований рендер UI: відрендерити компоненти з провайдером конкретної локалі та перевірити видимий текст/атрибути.
• Перевірки під час збірки: швидко виконати аудит локально через CLI.

Швидкий старт: аудит через CLI

Запустіть аудит з кореня вашого проєкту:

npx intlayer content test

Корисні прапорці:

• --env-file [path]: завантажити змінні середовища з файлу.
• -e, --env [name]: вибрати профіль середовища.
• --base-dir [path]: встановити базову директорію додатку для вирішення шляхів.
• --verbose: показувати детальні логи.
• --prefix [label]: додавати префікс до рядків логу.
• --build [build]: збирати словники перед тестуванням, щоб переконатися, що вміст актуальний. True примусово виконає збірку, false пропустить збірку, undefined дозволить використовувати кеш збірки.

Примітка: CLI виводить детальний звіт, але не завершує виконання з ненульовим кодом при помилках. Для контролю в CI додайте модульний тест (нижче), який перевіряє, що кількість відсутніх обов'язкових локалей дорівнює нулю.

Програмний тест (Vitest/Jest)

Використайте API Intlayer CLI, щоб переконатися, що для обов'язкових локалей немає відсутніх перекладів.

/* @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) {      // Корисно, коли тест не проходить локально або в CI      console.log(result.missingTranslations);    }    expect(result.missingRequiredLocales).toHaveLength(0);  });});

Jest еквівалент:

import { listMissingTranslations } from "intlayer/cli";test("has no missing required locales", async () => {  const result = await listMissingTranslations();  if (result.missingRequiredLocales.length > 0) {    // Корисно, коли тест не проходить локально або в CI    console.log(result.missingTranslations);  }  expect(result.missingRequiredLocales).toHaveLength(0);});

Як це працює:

• Intlayer читає вашу конфігурацію (locales, requiredLocales) та оголошені словники, а потім звітує:
  • missingTranslations: по‑ключу, які локалі відсутні та з якого файлу.
  • missingLocales: об'єднання всіх відсутніх локалей.
  • missingRequiredLocales: підмножина, обмежена requiredLocales (або всі локалі, якщо requiredLocales не встановлено).

Тестування локалізованого інтерфейсу (React / Next.js)

Рендерте компоненти під провайдером Intlayer та перевіряйте видимий вміст.

Приклад для React (Testing Library):

import { IntlayerProvider } from "react-intlayer/client";import { render, screen } from "@testing-library/react";import { MyComponent } from "./MyComponent";test("рендерить локалізований заголовок англійською", () => {  render(    <IntlayerProvider locale="en-US">      <MyComponent />    </IntlayerProvider>  );  expect(    screen.getByText("Очікуваний заголовок англійською")  ).toBeInTheDocument();});

Next.js (App Router) example: use the framework wrapper:

import { IntlayerClientProvider } from "next-intlayer/client";import { render, screen } from "@testing-library/react";import { MyPage } from "./MyPage";test("відображає локалізований заголовок французькою", () => {  render(    <IntlayerClientProvider locale="fr-FR">      <MyPage />    </IntlayerClientProvider>  );  expect(    screen.getByRole("heading", { name: "Titre attendu" })  ).toBeInTheDocument();});

Поради:

• Коли потрібні сирі рядкові значення для атрибутів (наприклад, aria-label), отримуйте поле .value, яке повертає useIntlayer в React.
• Тримайте словники поруч з компонентами для спрощення юніт-тестування та очищення.

Неперервна інтеграція

Додайте тест, який завершуватиме збірку з помилкою, коли відсутні обов'язкові переклади.

package.json:

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

Приклад GitHub Actions:

name: CIon: [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: npm run test:i18n

Необов'язково: запустіть аудит CLI, щоб отримати зрозумілий для людини підсумок разом із тестами:

npx intlayer content test --verbose

Усунення неполадок

• Переконайтеся, що ваша конфігурація Intlayer визначає locales і (за потреби) requiredLocales.
• Якщо ваш застосунок використовує динамічні або віддалені словники, запускайте тести в середовищі, де ці словники доступні.
• Для змішаних монорепозиторіїв використовуйте --base-dir, щоб вказати CLI правильний корінь застосунку.