Testing Komponen Image Next.js

3 menit baca.
Tags: JavaScriptNext.jsUnit testJest

Testing next/image awalnya terasa menyebalkan. Banyak test gagal karena Next.js Image punya perilaku optimasi yang tidak sama dengan img biasa di Jest.

Fix paling mudah: mock jadi img biasa dan test output yang memang kamu pedulikan.

Kenapa test gagal dengan next/image

next/image melakukan lebih dari sekadar render tag gambar. Ia mengubah props dan menambahkan logic optimasi. Di unit test, ini bisa menyebabkan:

  • nilai src yang tidak terduga
  • perilaku width/height wajib yang hilang
  • perbedaan render yang tidak berguna untuk unit test UI

Untuk kebanyakan test komponen, kamu cukup memverifikasi alt text dan sumber gambar ada.

Mock sederhana untuk Jest

Tambahkan mock ini di file test (atau di global setup Jest):

jest.mock('next/image', () => ({
  __esModule: true,
  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => {
    // Keep test behavior predictable by rendering a real img
    // @ts-expect-error - Next Image props are wider than native img props
    return <img {...props} />;
  },
}));

Sekarang test bisa berinteraksi dengan output gambar secara normal.

Contoh test komponen

import { render, screen } from '@testing-library/react';
import ProductCard from './ProductCard';

test('shows product thumbnail', () => {
  render(<ProductCard name="Keyboard" imageUrl="/images/keyboard.png" />);

  const image = screen.getByRole('img', { name: /keyboard/i });
  expect(image).toBeInTheDocument();
  expect(image).toHaveAttribute('src', '/images/keyboard.png');
});

Fokus ke perilaku yang dilihat user, bukan implementasi internal optimasi Next.js.

Taruh mock di setup file (disarankan)

Kalau banyak test memakai next/image, taruh mock sekali saja di file setup Jest.

Contoh jest.setup.ts:

import '@testing-library/jest-dom';

jest.mock('next/image', () => ({
  __esModule: true,
  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => {
    // @ts-expect-error - okay in tests
    return <img {...props} />;
  },
}));

Lalu daftarkan setup itu di config Jest:

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

Apa yang perlu di-test (dan yang dilewati)

Yang layak dicek:

  • gambar ter-render
  • alt text benar
  • fallback image muncul saat URL kosong

Biasanya dilewati di unit test:

  • internal optimasi image Next.js
  • parameter URL hasil image loader
  • timing loading gambar di level browser
Related Posts