Catatan Kuliah: Unit Testing di Next.js App Router

Pendahuluan

• Selamat datang di channel Pipcon Studio.
• Topik: Melanjutkan series Next.js App Router dengan fokus pada unit testing.
• Pentingnya unit testing dalam pengembangan perangkat lunak dan di industri.

Apa itu Unit Testing?

• Unit testing adalah pengujian bagian kecil dari kode (unit) untuk memastikan bahwa mereka berfungsi dengan baik.
• Biasanya diperlukan sebelum kode dapat dipindahkan ke produksi.
• Terdapat standarisasi coverage yang harus dipenuhi.

Setup Unit Testing di Next.js App Router

• Setup unit testing di Next.js App Router mirip dengan Pages Router.
• Referensi ke dokumentasi Pages Router untuk unit testing:
  • Tidak ada dokumentasi untuk App Router.
  • Dapat menggunakan dokumentasi Pages Router.

Langkah-langkah Setup

1. Menggunakan Jest dan React Testing Library

   • Tiga cara untuk setup: menggunakan BB, Next.js Rust Compiler, atau instalasi langsung saat aplikasi diinstal.
   • Dalam video ini, menggunakan Rust Compiler.

2. Instalasi Package yang Diperlukan

   • Package yang perlu diinstal:
     • jest
     • jest-environment-jsdom
     • @testing-library/react
     • @testing-library/jest-dom
   • Jalankan perintah di terminal untuk menginstal.

3. Mengonfigurasi Jest

   • Buat file jest.config.mjs di root aplikasi.
   • Tambahkan konfigurasi berikut:
     • modulePaths: Array berisi rootDir (src) dan pengaturan coverage.
     • Tentukan file-file yang akan diuji dan yang akan diabaikan (d.ts, node_modules, dan hasil build).

Struktur Folder untuk Testing

• Buat struktur folder:
  • src
    • __tests__
      • app
        • about
          • about.spec.tsx

Penulisan Tes

• Import komponen yang ingin diuji:
  • import AboutPage from '../app/about/page';
• Gunakan fungsi describe untuk mengelompokkan tes.
• Menulis tes yang memeriksa apakah halaman About dirender:
  • Contoh: expect(page).toMatchSnapshot();

Menjalankan Tes

• Tambahkan skrip di package.json:
  • test: untuk menjalankan semua tes.
  • test:cover: untuk coverage.
  • test:watch: untuk memantau perubahan saat coding.
• Jalankan perintah npm run test untuk memulai pengujian.

Memeriksa Hasil Coverage

• Hasil testing dapat dilihat di folder coverage.
• Coverage harus di atas 80% untuk dianggap aman untuk produksi.

Penanganan Pengujian yang Tidak Diperlukan

• Dapat menonaktifkan pengujian pada bagian tertentu seperti API dan library dengan menyesuaikan konfigurasi.

Kesimpulan

• Unit testing adalah bagian penting dari pengembangan perangkat lunak.
• Video ini hanya mencakup setup dasar untuk unit testing di Next.js App Router.
• Diharapkan akan ada lebih banyak pembelajaran di masa depan.

Penutupan

• Jangan lupa untuk subscribe, comment, like, dan share video.
• Sampai jumpa di video berikutnya!