Testing Library next-i18next dengan Jest

2 menit baca.
Tags: JavaScriptJestUnit test

Testing komponen yang memakai next-i18next bisa gagal kalau config translation tidak ter-load di Jest. Untuk kebanyakan unit test, cara termudah adalah me-mock hook translation.

Kenapa mock membantu

Di unit test, biasanya kamu ingin menguji logic UI, bukan internal framework translation.

Me-mock useTranslation bikin test cepat dan mudah diprediksi.

Contoh mock dasar

jest.mock('next-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
    i18n: { language: 'en' },
  }),
}));

Sekarang t('common.submit') mengembalikan string key-nya, dan itu cukup untuk banyak test.

Contoh test komponen

it('renders translated label key', () => {
  render(<SubmitButton />);
  expect(screen.getByText('common.submit')).toBeInTheDocument();
});

Test ini memastikan komponenmu meminta translation key yang benar.

Opsi global setup

Kalau banyak file butuh mock ini, taruh di jest.setup.ts supaya tidak diulang-ulang.

Pastikan juga di config Jest:

setupFilesAfterEnv: ['<rootDir>/jest.setup.ts']

Kapan tidak perlu mock

Kalau kamu ingin menguji integrasi pergantian bahasa, kamu mungkin butuh setup i18n yang lebih lengkap dengan resource asli.

Pakai setup lengkap itu hanya di integration test, tidak di setiap unit test.

Related Posts