Belajar Jest - Ekosistem & Tools

#Pendahuluan

Jest tidak berjalan sendiri — dia dikelilingi ekosistem tooling yang membuat testing menyeluruh dan menyenangkan. Episode 21 menjelajahi ekosistem & tools di sekitar Jest: Testing Library untuk komponen, Cypress dan Playwright untuk end-to-end, ESLint untuk menjaga kualitas test, plugin serta utilitas komunitas, debugging test di IDE, dan sumber belajar resmi.

Memahami ekosistem membantu kalian memilih alat yang tepat untuk setiap lapisan pengujian — unit, integration, dan e2e — tanpa tumpang tindih yang membingungkan.

#Alat Pendukung: Testing Library

#Testing Library untuk Komponen

Testing Library adalah keluarga library yang bekerja bersama Jest untuk menguji antarmuka. Untuk React ada @testing-library/react, untuk Vue ada variannya, dan untuk DOM murni ada @testing-library/dom. Prinsipnya sama: menguji perilaku yang terlihat pengguna.

Testing Library dengan Jest

import { render, screen } from "@testing-library/react";
 
test("menampilkan daftar", () => {
  render(<DaftarItem items={["satu", "dua"]} />);
  expect(screen.getAllByRole("listitem")).toHaveLength(2);
});

screen.getAllByRole("listitem") memakai query berbasis peran aksesibilitas — cara pengguna dan alat bantu membaca halaman. Testing Library menjadi standar industri untuk pengujian komponen bersama Jest.

#Alat Pendukung: Cypress dan Playwright

#End-to-End di Lapisan Berbeda

Jest fokus pada unit dan integration test. Untuk end-to-end yang berjalan di browser sungguhan, ada Cypress dan Playwright:

• Cypress: mudah dipakai, eksekusi di browser dengan time-travel debugging.
• Playwright: mendukung banyak browser, cepat, dan punya test runner modern.

Keduanya melengkapi Jest, bukan menggantikannya: unit test cepat menangkap logika internal, sementara e2e memverifikasi alur lengkap dari UI sampai backend.

npm install --save-dev @playwright/test

Perintah npm install --save-dev @playwright/test menambahkan Playwright sebagai dependency dev. Untuk alur e2e yang sering berubah, Playwright menyediakan otomatisasi ulang yang lebih mudah daripada menulis ulang snapshot besar.

#Alat Pendukung: ESLint

#Menjaga Kualitas Test dengan Linter

ESLint membantu menjaga test tetap sehat. Dua plugin yang penting:

• eslint-plugin-jest: aturan spesifik untuk test Jest, misalnya melarang test kosong.
• eslint-plugin-testing-library: memastikan query yang dipakai adalah best practice.

{
  "plugins": ["jest"],
  "rules": {
    "jest/no-disabled-tests": "warn",
    "jest/prefer-to-have-length": "warn"
  }
}

Aturan jest/no-disabled-tests memberi peringatan saat ada test yang di-skip — mencegah test dinonaktifkan diam-diam. Linter menjaga kualitas secara otomatis tanpa menunggu review manusia.

#Plugin dan Utilitas Komunitas

#Paket yang Sering Dipakai

Ekosistem Jest memiliki banyak utilitas komunitas yang matang:

• jest-extended: menambah matchers ekspresif seperti toBeOneOf.
• jest-junit: laporan JUnit untuk CI.
• jest-watch-typeahead: filter test di watch mode dengan mengetik nama.
• @types/jest: type definition lengkap untuk TypeScript.

npm install --save-dev jest-extended

jest-extended menambah puluhan matchers tambahan. Aktifkan di setupFilesAfterEnv dengan import "jest-extended" agar tersedia di semua test. Pakai sesuai kebutuhan — terlalu banyak plugin justru menambah permukaan konfigurasi.

#Debugging Test di IDE

#Menjalankan dan Men-debug dari Editor

VS Code dan JetBrains IDE menyediakan integrasi Jest: ikon run di samping setiap test, debugger dengan breakpoint, dan panel hasil di editor. Konfigurasi debug di VS Code terlihat seperti ini:

{
  "type": "node",
  "request": "launch",
  "name": "Debug Jest",
  "program": "${workspaceFolder}/node_modules/jest/bin/jest.js",
  "args": ["--runInBand"],
  "console": "integratedTerminal"
}

Konfigurasi launch.json ini menjalankan Jest dalam mode debug dengan --runInBand. Setelah itu, breakpoint di test atau kode sumber berhenti persis di titik yang kalian inginkan — jauh lebih cepat daripada menebak dengan console.log.

#Sumber Belajar dan Dokumentasi

#Resmi dan Terpercaya

Untuk pendalaman, sumber yang paling dapat diandalkan:

• Dokumentasi resmi Jest — situs jestjs.io dengan panduan per topik.
• Testing Library docs — panduan testing-library.com.
• Panduan TypeScript integration — cara menggabungkan Jest dan TypeScript.
• Changelog resmi — daftar perubahan per versi.

Mulailah dari dokumen "Getting Started" dan "Snapshot Testing", lalu baca API reference saat membutuhkan detail spesifik. Dokumentasi resmi selalu sinkron dengan versi terbaru.

#Penutup

Episode 21 menjelajahi ekosistem di sekitar Jest: Testing Library untuk komponen, Cypress dan Playwright untuk e2e, ESLint untuk menjaga kualitas, plugin komunitas seperti jest-extended, debugging di IDE, serta sumber belajar resmi.

Inti yang harus dibawa pulang:

• Testing Library menguji perilaku yang terlihat pengguna.
• Cypress dan Playwright melengkapi Jest untuk end-to-end di browser.
• ESLint dengan plugin jest menjaga kualitas test secara otomatis.
• Utilitas komunitas menambah matchers dan laporan tanpa kerja keras.
• Debug test langsung dari IDE dengan breakpoint dan --runInBand.
• Dokumentasi resmi jestjs.io adalah rujukan utama.

Di episode 22, episode terakhir, kita akan membahas future-proofing Jest skills — menjaga keandalan untuk aplikasi yang terus berkembang, mengombinasikan Jest dengan strategi end-to-end dan integration, transisi ke tooling baru jika dibutuhkan, serta best practices untuk suite yang berkelanjutan.