Belajar Gatsby - Testing & Quality

#Pendahuluan

Sebuah situs yang besar hanya bisa bertahan lama jika ditopang pengujian otomatis. Gatsby memberi kebebasan untuk memilih tooling testing, dan pola yang paling umum adalah Jest untuk unit testing serta React Testing Library untuk merender dan berinteraksi dengan komponen.

Episode 16 membahas unit testing dengan Jest dan React Testing Library, integration testing untuk halaman Gatsby, pengujian aksesibilitas dan SEO audit, serta static analysis dengan ESLint.

#Unit Testing dengan Jest dan React Testing Library

#Setup Jest di Gatsby

Gatsby menyediakan gatsby-plugin-jest agar Jest langsung memahami transformasi Babel dan alias Gatsby. Setelah diinstall, konfigurasi tambahan bisa disimpan di jest.config.js.

npm install --save-dev jest @testing-library/react @testing-library/jest-dom gatsby-plugin-jest

Plugin gatsby-plugin-jest menyuntikkan transformasi yang dibutuhkan Gatsby ke Jest, termasuk dukungan terhadap modul gatsby di dalam komponen yang diuji.

#Menulis Unit Test untuk Komponen

Tes unit memverifikasi perilaku komponen dalam isolasi. Contoh komponen tombol yang menampilkan jumlah klik:

Komponen counter

import { useState } from "react"
 
const Counter = () => {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      Klik: {count}
    </button>
  )
}
 
export default Counter

Lalu tulis tes di file counter.test.js:

Unit test dengan React Testing Library

import { render, screen, fireEvent } from "@testing-library/react"
import Counter from "./counter"
 
test("counter bertambah saat tombol diklik", () => {
  render(<Counter />)
 
  const button = screen.getByRole("button", { name: /klik/i })
  fireEvent.click(button)
 
  expect(screen.getByText(/klik: 1/i)).toBeInTheDocument()
})

screen.getByRole dan screen.getByText adalah cara menyeleksi elemen yang dianjurkan React Testing Library karena mendorong pengujian sesuai perilaku, bukan implementasi.

#Integration Testing untuk Halaman Gatsby

#Mocking Gatsby Modules

Halaman Gatsby sering memakai useStaticQuery dan Link. Saat menguji halaman, modul-modul itu perlu di-mock agar tes tidak membutuhkan build penuh. Buat file __mocks__/gatsby.js di root project:

Mock module gatsby

const React = require("react")
 
exports.useStaticQuery = () => ({
  site: {
    siteMetadata: { title: "Test Site" },
  },
})
 
exports.Link = ({ to, children }) =>
  React.createElement("a", { href: to }, children)

Dengan mock di atas, halaman yang memakai useStaticQuery dan Link bisa dirender langsung di dalam Jest tanpa menjalankan GraphQL.

#Merender Halaman Lengkap

Tes integrasi merender seluruh halaman dengan semua komponennya, lalu memeriksa konten yang tampil:

Integration test halaman index

import { render, screen } from "@testing-library/react"
import IndexPage from "../pages/index"
 
test("halaman index menampilkan judul", () => {
  render(<IndexPage />)
  expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument()
})

Perbedaan unit test dan integration test ada pada cakupan: unit test fokus satu komponen, integration test memastikan banyak komponen bekerja bersama sebagai satu halaman.

#Pengujian Aksesibilitas dan SEO Audit

#Aksesibilitas dengan jest-axe

Pengujian aksesibilitas otomatis menangkap masalah seperti kontras, atribut aria yang salah, atau elemen tanpa label. jest-axe menjalankan aturan axe-core di atas hasil render:

npm install --save-dev jest-axe

Di dalam tes, jalankan aturan aksesibilitas terhadap hasil render:

Tes aksesibilitas dengan jest-axe

import { render } from "@testing-library/react"
import { axe, toHaveNoViolations } from "jest-axe"
import HomePage from "../pages/home"
 
expect.extend(toHaveNoViolations)
 
test("halaman home tidak memiliki pelanggaran aksesibilitas", async () => {
  const { container } = render(<HomePage />)
  expect(await axe(container)).toHaveNoViolations()
})

expect(...).toHaveNoViolations() gagal otomatis bila ditemukan pelanggaran aturan aksesibilitas pada halaman yang dirender.

#SEO Audit dengan Lighthouse

Lighthouse tetap menjadi audit terakhir di luar unit test: jalankan terhadap production build dan periksa kategori SEO, best practices, serta accessibility. Audit ini menangkap hal yang tidak bisa dideteksi unit test, seperti meta description yang hilang atau viewport yang tidak terdefinisi.

#Static Analysis dengan ESLint

#Konfigurasi ESLint

Gatsby membundel ESLint dengan aturan dari eslint-config-react-app. Untuk menambah aturan khusus, tambahkan file konfigurasi ESLint atau sesuaikan package.json. Perintah gatsby develop juga menampilkan peringatan lint langsung di terminal.

#Performance Checks di CI

Gabungkan ESLint dengan script di package.json agar setiap perubahan yang melanggar aturan langsung gagal di pipeline:

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "test": "jest"
  }
}

npm run lint dan npm test bisa dipanggil di CI sebelum build. Menjalankan keduanya secara rutin membuat kualitas terjaga tanpa bergantung pada review manual semata.

#Penutup

Inti yang harus dibawa pulang:

• gatsby-plugin-jest mengintegrasikan Jest dengan tooling Gatsby.
• React Testing Library mendorong pengujian berbasis perilaku.
• Mock modul gatsby memungkinkan tes halaman tanpa build.
• jest-axe otomatis mendeteksi pelanggaran aksesibilitas.
• Lighthouse melengkapi audit SEO dan aksesibilitas di level halaman.
• ESLint di CI mencegah masalah kualitas masuk ke production.

Di episode 17 selanjutnya kita akan membahas progressive web app — menjadikan situs Gatsby installable dan offline-first lewat service worker, web app manifest, dan strategi caching.