Menguji konten Anda

Panduan ini menunjukkan cara memverifikasi secara otomatis bahwa kamus Anda lengkap, menangkap terjemahan yang hilang sebelum pengiriman, dan menguji UI yang dilokalisasi dalam aplikasi Anda.

Apa yang bisa Anda uji

• Terjemahan yang hilang: gagal CI jika ada locale yang diperlukan hilang untuk kamus apa pun.
• Rendering UI yang dilokalisasi: render komponen dengan penyedia locale tertentu dan pastikan teks/atribut yang terlihat.
• Audit saat build: jalankan audit cepat secara lokal melalui CLI.

Mulai cepat: audit melalui CLI

Jalankan audit dari root proyek Anda:

npx intlayer content test

Flag yang berguna:

• --env-file [path]: memuat variabel lingkungan dari sebuah file.
• -e, --env [name]: memilih profil lingkungan.
• --base-dir [path]: menetapkan direktori dasar aplikasi untuk resolusi.
• --verbose: menampilkan log secara detail.
• --prefix [label]: menambahkan prefix pada baris log.
• --build [build]: membangun kamus sebelum pengujian untuk memastikan konten terbaru. True akan memaksa build, false akan melewati build, undefined akan menggunakan cache build.

Catatan: CLI mencetak laporan terperinci tetapi tidak keluar dengan kode non-zero saat terjadi kegagalan. Untuk pengujian CI, tambahkan unit test (di bawah) yang memastikan tidak ada locale wajib yang hilang.

Pengujian programatik (Vitest/Jest)

Gunakan Intlayer CLI API untuk memastikan tidak ada terjemahan yang hilang untuk locale wajib Anda.

/* @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) {      // Berguna saat pengujian gagal secara lokal atau di CI      console.log(result.missingTranslations);    }    expect(result.missingRequiredLocales).toHaveLength(0);  });});

Setara Jest:

import { listMissingTranslations } from "intlayer/cli";test("tidak ada locale wajib yang hilang", async () => {  const result = await listMissingTranslations();  if (result.missingRequiredLocales.length > 0) {    // Berguna saat pengujian gagal secara lokal atau di CI    console.log(result.missingTranslations);  }  expect(result.missingRequiredLocales).toHaveLength(0);});

Cara kerjanya:

• Intlayer membaca konfigurasi Anda (locales, requiredLocales) dan kamus yang dideklarasikan, lalu melaporkan:
  • missingTranslations: per kunci, locale mana yang hilang dan dari file mana.
  • missingLocales: gabungan dari semua locale yang hilang.
  • missingRequiredLocales: subset terbatas pada requiredLocales (atau semua locales jika requiredLocales tidak disetel).

Menguji UI yang dilokalkan (React / Next.js)

Render komponen di bawah penyedia Intlayer dan lakukan assert pada konten yang terlihat.

Contoh React (Testing Library):

import { IntlayerProvider } from "react-intlayer/client";import { render, screen } from "@testing-library/react";import { MyComponent } from "./MyComponent";test("menampilkan judul yang dilokalkan dalam bahasa Inggris", () => {  render(    <IntlayerProvider locale="en-US">      <MyComponent />    </IntlayerProvider>  );  expect(screen.getByText("Expected English title")).toBeInTheDocument();});

Contoh Next.js (App Router): gunakan pembungkus framework:

import { IntlayerClientProvider } from "next-intlayer/client";import { render, screen } from "@testing-library/react";import { MyPage } from "./MyPage";test("menampilkan heading yang dilokalkan dalam bahasa Prancis", () => {  render(    <IntlayerClientProvider locale="fr-FR">      <MyPage />    </IntlayerClientProvider>  );  expect(    screen.getByRole("heading", { name: "Titre attendu" })  ).toBeInTheDocument();});

Tips:

• Saat Anda membutuhkan nilai string mentah untuk atribut (misalnya, aria-label), akses field .value yang dikembalikan oleh useIntlayer di React.
• Simpan kamus berdekatan dengan komponen untuk memudahkan pengujian unit dan pembersihan.

Integrasi Berkelanjutan

Tambahkan pengujian yang akan membuat build gagal ketika terjemahan yang dibutuhkan hilang.

package.json:

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

Contoh 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

Opsional: jalankan audit CLI untuk ringkasan yang mudah dibaca manusia bersamaan dengan pengujian:

npx intlayer content test --verbose

Pemecahan Masalah

• Pastikan konfigurasi Intlayer Anda mendefinisikan locales dan (opsional) requiredLocales.
• Jika aplikasi Anda menggunakan kamus dinamis atau jarak jauh, jalankan pengujian di lingkungan di mana kamus tersebut tersedia.
• Untuk monorepo campuran, gunakan --base-dir untuk mengarahkan CLI ke root aplikasi yang benar.