Belajar Cypress - Component Testing

#Pendahuluan

Episode 8 menutup fase interaksi lanjutan. Sekarang kalian turun satu level: dari menguji halaman penuh menjadi menguji komponen secara terisolasi. Episode 9 membahas component testing dengan Cypress untuk React, Vue, dan Angular — menyiapkan environment component, menulis assertion berbasis perilaku komponen, serta mengintegrasikannya dengan Storybook dan UI library.

Mengapa component testing penting? Halaman penuh lambat dan bergantung pada banyak hal: router, backend, dan state global. Komponen bisa diuji sendiri, jauh lebih cepat, dan langsung menunjukkan komponen mana yang rusak tanpa menyelami seluruh alur aplikasi.

#Component Testing untuk React, Vue, dan Angular

#Apa Itu Component Testing

Component testing menguji satu komponen UI di dalam browser nyata, lengkap dengan event, styling, dan interaksi, tetapi tanpa memuat seluruh aplikasi. Berbeda dengan unit test yang menjalankan komponen di runtime simulasi, Cypress merender komponen di browser sungguhan — jadi perilaku yang kalian lihat persis dengan perilaku yang dirasakan pengguna.

Install dulu dukungan component testing untuk framework kalian:

npm install -D cypress @cypress/react @cypress/vite-dev-server

Perintah npm install -D cypress @cypress/react @cypress/vite-dev-server menambahkan dukungan rendering React dengan dev server Vite. Untuk Vue, ganti @cypress/react dengan @cypress/vue; untuk Angular gunakan @cypress/angular.

#Menyiapkan Konfigurasi

Tambahkan blok component di cypress.config.js:

Konfigurasi component testing

const { defineConfig } = require("cypress");
 
module.exports = defineConfig({
  component: {
    devServer: {
      framework: "react",
      bundler: "vite",
    },
  },
});

framework: "react" memberitahu Cypress framework mana yang dipakai untuk memuat komponen. Nilai bundler: "vite" memakai Vite, yang juga digunakan oleh tooling frontend modern seperti Next.js dan Vite-based frameworks.

#Menyiapkan Test Environment Component

#File Spec untuk Komponen

Spec component diletakkan berdampingan dengan komponen, atau di folder terpisah. Contoh test komponen Tombol:

Spec komponen Tombol

import React from "react";
import { mount } from "cypress/react";
import Tombol from "./Tombol";
 
describe("Tombol", () => {
  it("menampilkan teks dan merespons klik", () => {
    const onClick = cy.stub();
    mount(<Tombol label="Kirim" onClick={onClick} />);
 
    cy.get("[data-cy=tombol]").should("have.text", "Kirim");
    cy.get("[data-cy=tombol]").click();
    expect(onClick).to.have.been.calledOnce;
  });
});

mount(<Tombol label="Kirim" onClick={onClick} />) merender komponen di browser. cy.stub() membuat fungsi tiruan untuk memeriksa bahwa onClick dipanggil — ini pola assertion berbasis perilaku.

#Dev Server Component

Cypress menjalankan dev server di belakang layar. Mode ini jauh lebih cepat daripada memuat aplikasi penuh karena hanya komponen yang dipakai yang dikompilasi. Kalian bisa membuka spec dengan perintah khusus:

npx cypress open --component

npx cypress open --component membuka Test Runner dalam mode component. Pilih spec komponen dan test berjalan langsung, biasanya dalam hitungan detik.

#Assertion Berbasis Perilaku Komponen

#Memeriksa Perilaku, Bukan Struktur

Hindari memeriksa detail DOM yang rapuh. Fokus pada perilaku: teks yang terlihat, state yang berubah, dan interaksi yang bekerja:

Assertion perilaku komponen

it("menampilkan spinner saat loading", () => {
  mount(<DaftarProduk loading />);
 
  cy.get("[data-cy=spinner]").should("be.visible");
  cy.get("[data-cy=daftar]").should("not.exist");
});
 
it("menampilkan produk setelah load", () => {
  mount(<DaftarProduk items={produk} />);
 
  cy.get("[data-cy=daftar]").children().should("have.length", 3);
});

mount(<DaftarProduk loading />) me-render komponen dengan prop yang sama seperti pengujian unit, tetapi dalam browser nyata. Assertion .should("have.length", 3) memverifikasi hasil render daftar produk.

#Interaksi dan Perubahan State

Untuk komponen yang berubah state, klik dan verifikasi hasilnya seperti test E2E biasa:

Menguji perubahan state

it("mengirim status setelah tombol diklik", () => {
  mount(<FormStatus />);
 
  cy.get("[data-cy=kirim]").click();
  cy.get("[data-cy=status]").should("have.text", "Terkirim");
});

cy.get("[data-cy=kirim]").click() meniru klik pengguna, lalu assertion have.text memeriksa state komponen berubah. Inilah yang dimaksud behavioral testing — memeriksa apa yang dilakukan komponen, bukan bagaimana implementasinya.

#Integrasi dengan Storybook dan UI Library

#Memakai Storybook sebagai Test Harness

Storybook menawarkan story untuk setiap state komponen. Cypress bisa memakai story tersebut sebagai basis test:

npx cypress run --config baseUrl=http://localhost:6006

npx cypress run --config baseUrl=http://localhost:6006 mengarahkan test ke dev server Storybook. Setiap story berfungsi seperti halaman berisi komponen dalam satu state tertentu — ideal untuk eksplorasi state dan visual testing.

#Menguji Komponen UI Library

Untuk UI library seperti MUI, Chakra, atau Ant Design, komponen sudah teruji oleh maintainer. Fokus test kalian pada pemakaian di aplikasi: form yang disusun dari komponen library, kombinasi validasi, dan alur interaksi. Buat custom mount command untuk membungkus provider:

Custom mount dengan provider

Cypress.Commands.add("mountUI", (komponen) => {
  mount(<TemaProvider>{komponen}</TemaProvider>);
});

Cypress.Commands.add("mountUI", ...) membungkus mount dengan provider tema agar seluruh komponen library mendapat konteks yang benar. Pola ini menghindari pengulangan provider di setiap test.

#Penutup

Episode 9 membawa kalian dari menguji halaman menjadi menguji komponen: component testing untuk React, Vue, dan Angular dengan browser nyata, konfigurasi dev server di cypress.config.js, assertion berbasis perilaku dengan mount dan cy.stub, serta integrasi dengan Storybook dan UI library.

Inti yang harus dibawa pulang:

• Component testing merender komponen di browser nyata tanpa memuat seluruh aplikasi.
• Install dev dependency sesuai framework: @cypress/react, @cypress/vue, atau @cypress/angular.
• Konfigurasi dev server diletakkan di blok component pada cypress.config.js.
• Assertion berfokus pada perilaku komponen, bukan struktur DOM yang rapuh.
• Storybook bisa dipakai sebagai test harness untuk eksplorasi state komponen.

Di episode 10 selanjutnya kalian akan merangkai seluruh interaksi menjadi end-to-end flows — menyusun test scenario end-to-end, alur login, checkout, dan multi-page journeys, mengelola state application under test, serta data setup dan teardown. Inilah esensi E2E testing yang sebenarnya.