Probando tu contenido

Esta guía muestra cómo verificar automáticamente que tus diccionarios estén completos, detectar traducciones faltantes antes de lanzar y probar la interfaz localizada en tu aplicación.

Qué puedes probar

• Traducciones faltantes: falla en CI si faltan locales requeridos en cualquier diccionario.
• Renderizado de UI localizada: renderiza componentes con un proveedor de locales específico y verifica el texto/atributos visibles.
• Auditorías en tiempo de compilación (build time): ejecuta npx intlayer content test localmente o en CI; termina con un código distinto de cero cuando faltan traducciones requeridas.

Inicio rápido: auditoría vía CLI

Ejecuta la auditoría desde la raíz de tu proyecto:

npx intlayer content test

Flags útiles:

• --env-file [ruta]: carga variables de entorno desde un archivo.
• -e, --env [nombre]: selecciona un perfil de entorno.
• --base-dir [ruta]: establece el directorio base de la aplicación para la resolución.
• --verbose: muestra registros detallados.
• --prefix [etiqueta]: prefija las líneas de registro.

El comando termina con el código 1 cuando falta cualquier locale requerido (consulta requiredLocales en tu configuración), y con 0 en caso contrario. Puedes usarlo directamente para hacer fallar trabajos de CI o hooks de commit. La prueba programática de abajo es una alternativa opcional.

Prueba programática (Vitest/Jest)

Usa la API CLI de Intlayer para asegurar que no falten traducciones en tus locales requeridos.

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

describe("traducciones", () => {
  it("no tiene locales requeridos faltantes", () => {
    const result = listMissingTranslations();

    if (result.missingRequiredLocales.length > 0) {
      // Útil cuando la prueba falla localmente o en CI
      console.log(result.missingTranslations);
    }

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

Equivalente en Jest:

import { listMissingTranslations } from "intlayer/cli";

test("no tiene locales requeridos faltantes", () => {
  const result = listMissingTranslations();

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

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

Cómo funciona:

• Intlayer lee tu configuración (locales, requiredLocales) y los diccionarios declarados, luego informa:
  • missingTranslations: por clave, qué locales faltan y de qué archivo.
  • missingLocales: unión de todos los locales faltantes.
  • missingRequiredLocales: subconjunto limitado a requiredLocales (o todos los locales si requiredLocales no está definido).

Pruebas de UI localizada (React / Next.js)

Renderiza componentes bajo un proveedor de Intlayer y verifica el contenido visible.

Ejemplo en 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("Título esperado en inglés")).toBeInTheDocument();
});

Ejemplo en Next.js (App Router): usa el envoltorio del framework:

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

test("renderiza encabezado localizado en francés", () => {
  render(
    <IntlayerClientProvider locale="fr-FR">
      <MyPage />
    </IntlayerClientProvider>
  );
  expect(
    screen.getByRole("heading", { name: "Titre attendu" })
  ).toBeInTheDocument();
});

Consejos:

• Cuando necesites valores de cadena sin procesar para atributos (por ejemplo, aria-label), accede al campo .value que devuelve useIntlayer en React.
• Mantén los diccionarios junto con los componentes para facilitar las pruebas unitarias y la limpieza.

Integración Continua

Ejecuta la auditoría CLI en CI. Hace fallar el trabajo cuando faltan traducciones requeridas.

package.json:

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

Alternativa: Vitest

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

Ejemplo de 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

Opcional: ejecuta la auditoría CLI para un resumen legible por humanos junto con las pruebas:

npx intlayer content test --verbose

Solución de Problemas

• Asegúrate de que tu configuración de Intlayer defina locales y (opcionalmente) requiredLocales.
• Si tu aplicación usa diccionarios dinámicos o remotos, ejecuta las pruebas en un entorno donde los diccionarios estén disponibles.
• Para monorepos mixtos, usa --base-dir para apuntar la CLI a la raíz correcta de la aplicación.