HomeSandboxShowcaseAppDocBlog
    • EnglishEnglish
      EN
    • русскийRussian
      RU
    • 日本語Japanese
      JA
    • françaisFrench
      FR
    • 한국어Korean
      KO
    • 中文Chinese
      ZH
    • españolSpanish
      ES
    • DeutschGerman
      DE
    • العربيةArabic
      AR
    • italianoItalian
      IT
    • British EnglishBritish English
      EN-GB
    • portuguêsPortuguese
      PT
    • हिन्दीHindi
      HI
    • TürkçeTurkish
      TR
    • polskiPolish
      PL
    • IndonesiaIndonesian
      ID
    • Tiếng ViệtVietnamese
      VI
    • українськаUkrainian
      UK
    /
    Filter docs by framework
    Alt+←
    Why Intlayer ?
    Get Started
    Concept
    • How Intlayer Works
    • Configuration
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • Visual Editor
    • CMS
    • CI/CD Integration
    • TranslationPluralEnumerationConditionGenderInsertionFileNestingMarkdownHTMLFunction Fetching
    • Per Locale File
    • Compiler
    • Auto Fill
    • Testing
    • Bundle Optimization
    Environment
    • Next.js 14 and App Router
      Next.js 15
      Next.js no locale path
      Next.js and Page Router
      Compiler
    • Tanstack Start Solid
    • Astro and React
      Astro and Svelte
      Astro and Vue
      Astro and Solid
      Astro and Preact
      Astro and Lit
      Astro and Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt and Vue
    • Vite and Solid
    • SvelteKit
    • Vite and Preact
    • Vite and Vanilla JS
    • Vite and Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native and Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx and React
    Plugins
    • JSON
    • gettext (.po)
    VS Code Extension
    Agent
    • MCP Server
    • Agent skills
    Releases
    • v8
    • v7
    • v6
    Benchmark
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    Blog
    Ask a question
    1. Documentation
    2. Testing
    Creation:2025-03-01Last update:2025-10-05
    Reference this doc to your favorite AI assistant
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    Ask your question and get a summary of the document by referencing this page and the AI provider of your choice

    Version History

    1. "Make test async and add build option"
      v6.0.110/5/2025
    2. "Introduction of testing"
      v6.0.09/20/2025
    Edit this doc

    If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

    GitHub link to the documentation
    Copy

    Copy doc Markdown to clipboard

    Testing your content

    This guide shows how to automatically verify your dictionaries are complete, catch missing translations before shipping, and test localized UI in your app.


    What you can test

    • Missing translations: fail CI if any required locales are missing for any dictionary.
    • Localized UI rendering: render components with a specific locale provider and assert on visible text/attributes.
    • Build-time audits: run a quick audit locally via CLI.

    Quick start: audit via CLI

    Run the audit from your project root:

    bash
    Copy code

    Copy the code to the clipboard

    npx intlayer content test

    Useful flags:

    • --env-file [path]: load environment variables from a file.
    • -e, --env [name]: select an environment profile.
    • --base-dir [path]: set the app base directory for resolution.
    • --verbose: show verbose logs.
    • --prefix [label]: prefix log lines.
    • --build [build]: build the dictionaries before testing to ensure the content is up to date. True will force the build, false will skip the build, undefined will allow using the cache of the build.

    Note: the CLI prints a detailed report but does not exit non‑zero on failures. For CI gating, add a unit test (below) that asserts zero missing required locales.


    Programmatic test (Vitest/Jest)

    Use the Intlayer CLI API to assert there are no missing translations for your required locales.

    Copy code

    Copy the code to the clipboard

    /* @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) {      // Helpful when the test fails locally or in CI      console.log(result.missingTranslations);    }    expect(result.missingRequiredLocales).toHaveLength(0);  });});

    Jest equivalent:

    Copy code

    Copy the code to the clipboard

    import { listMissingTranslations } from "intlayer/cli";test("has no missing required locales", async () => {  const result = await listMissingTranslations();  if (result.missingRequiredLocales.length > 0) {    // Helpful when the test fails locally or in CI    console.log(result.missingTranslations);  }  expect(result.missingRequiredLocales).toHaveLength(0);});

    How it works:

    • Intlayer reads your configuration (locales, requiredLocales) and declared dictionaries, then reports:
      • missingTranslations: per‑key, which locales are missing and from which file.
      • missingLocales: union of all missing locales.
      • missingRequiredLocales: subset limited to requiredLocales (or all locales if requiredLocales is not set).

    Testing localized UI (React / Next.js)

    Render components under an Intlayer provider and assert on visible content.

    React example (Testing Library):

    tsx
    Copy code

    Copy the code to the clipboard

    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("Expected English title")).toBeInTheDocument();});

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

    tsx
    Copy code

    Copy the code to the clipboard

    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();});

    Tips:

    • When you need raw string values for attributes (e.g., aria-label), access the .value field returned by useIntlayer in React.
    • Keep dictionaries colocated with components for easier unit testing and cleanup.

    Continuous Integration

    Add a test that fails the build when required translations are missing.

    package.json:

    json
    Copy code

    Copy the code to the clipboard

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

    GitHub Actions example:

    yaml
    Copy code

    Copy the code to the clipboard

    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

    Optional: run the CLI audit for a human-readable summary alongside tests:

    bash
    Copy code

    Copy the code to the clipboard

    npx intlayer content test --verbose

    Troubleshooting

    • Ensure your Intlayer configuration defines locales and (optionally) requiredLocales.
    • If your app uses dynamic or remote dictionaries, run tests in an environment where the dictionaries are available.
    • For mixed monorepos, use --base-dir to point the CLI at the correct application root.

    Auto Fill
    Bundle Optimization
    Alt+→

    In this page

      Discussions are anonymous and regularly reviewed to address common issues. Feel free to share feature ideas, feedback on the documentation, or anything related to Intlayer, we use this input to shape our roadmap and improve the product.

      npx intlayer content test
      /* @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) {      // Helpful when the test fails locally or in CI      console.log(result.missingTranslations);    }    expect(result.missingRequiredLocales).toHaveLength(0);  });});
      import { listMissingTranslations } from "intlayer/cli";test("has no missing required locales", async () => {  const result = await listMissingTranslations();  if (result.missingRequiredLocales.length > 0) {    // Helpful when the test fails locally or in CI    console.log(result.missingTranslations);  }  expect(result.missingRequiredLocales).toHaveLength(0);});
      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("Expected English title")).toBeInTheDocument();});
      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();});
      {  "scripts": {    "test:i18n": "vitest run -c"  }}
      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
      npx intlayer content test --verbose