Testing dengan Storybook

Testing dengan Storybook

Storybook bukan hanya untuk dokumentasi — ia juga bisa digunakan sebagai platform testing yang powerful untuk komponen UI.

Jenis Testing di Storybook

• Visual testing — Screenshot comparison untuk mendeteksi perubahan visual
• Interaction testing — Test alur user secara otomatis dalam story
• Accessibility testing — Audit otomatis dengan addon a11y

Interaction Testing

import { expect, userEvent, within } from "@storybook/test";

export const LoginForm = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    // Simulasi user mengisi form
    await userEvent.type(
      canvas.getByLabelText("Email"),
      "khansa@example.com"
    );
    await userEvent.type(
      canvas.getByLabelText("Password"),
      "password123"
    );
    await userEvent.click(canvas.getByRole("button", { name: "Login" }));

    // Verifikasi hasilnya
    await expect(canvas.getByText("Login berhasil!")).toBeInTheDocument();
  },
};

Visual Testing dengan Chromatic

# Install Chromatic
npm install --save-dev chromatic

# Kirim snapshot ke Chromatic
npx chromatic --project-token=<your-token>

Chromatic akan membandingkan screenshot setiap story dengan versi sebelumnya dan menandai perubahan visual untuk di-review.

Interaction testing di Storybook sangat cocok untuk form, wizard, dropdown, dan komponen yang punya alur interaksi kompleks.