Belajar Cypress - Fixtures & Test Data

#Pendahuluan

Test yang baik memisahkan data dari logika. Kalian tidak ingin mengubah test setiap kali dataset berubah, dan tidak ingin data pengguna asli bocor ke dalam test. Episode 6 memperkenalkan fixtures — file data statis yang dimuat Cypress — dan cara memakainya untuk data-driven testing serta mocking.

Di akhir episode ini, test kalian akan memakai data yang bisa diganti dari satu file tanpa menyentuh baris logika.

#Mengelola Test Data dengan Fixtures

Fixture disimpan di cypress/fixtures sebagai file JSON. Contoh dataset pengguna:

{
  "admin": {
    "email": "admin@example.com",
    "nama": "Arman Admin"
  },
  "member": {
    "email": "member@example.com",
    "nama": "Dwi Member"
  }
}

File ini adalah sumber data tunggal untuk banyak test. Mau menambah role baru? Cukup edit JSON, tanpa menyentuh kode test.

#Memuat Data dengan cy.fixture

cy.fixture() memuat file dari folder fixtures:

Memuat fixture dengan cy.fixture

beforeEach(() => {
  cy.fixture("users").as("users");
});
 
it("menampilkan nama admin", function () {
  cy.get("[data-cy=nama-pengguna]").should("have.text", this.users.admin.nama);
});

cy.fixture("users") memuat cypress/fixtures/users.json. Dengan .as("users"), data tersimpan sebagai alias yang bisa diakses lewat this.users di dalam test — itulah mengapa test memakai function () biasa, bukan arrow function, karena arrow function tidak mengikat this Mocha.

#Memuat Sekaligus Mengolah

Kalian juga bisa memuat fixture lalu memrosesnya dalam satu rantai:

Fixture dengan .then

cy.fixture("users").then((users) => {
  cy.get("[data-cy=email]").type(users.admin.email);
});

cy.fixture("users").then((users) => { ... }) memberi kalian objek JSON langsung di dalam callback — pola yang berguna saat data dipakai segera setelah dimuat.

#Data-Driven Testing dengan External Datasets

Data-driven testing menjalankan logika yang sama dengan banyak data. Kombinasikan fixture dengan array:

Data-driven test

describe("Validasi form", () => {
  const kasus = [
    { email: "", pesan: "Email wajib diisi" },
    { email: "bukan-email", pesan: "Format email salah" },
  ];
 
  kasus.forEach((k) => {
    it(`menolak email ${k.email || "kosong"}`, () => {
      cy.get("[data-cy=email]").type(k.email);
      cy.get("[data-cy=submit]").click();
      cy.contains(k.pesan).should("be.visible");
    });
  });
});

Perhatikan sintaks menolak email ${k.email || "kosong"} — template literal dipakai untuk membangun nama test yang deskriptif. Loop forEach menghasilkan beberapa test dari satu definisi.

#Memakai CSV dari Fixture

Untuk dataset besar, simpan data sebagai CSV di fixtures dan parse saat dimuat:

Parse CSV fixture

cy.fixture("produk.csv").then((csv) => {
  const baris = csv.split("\n").slice(1);
  expect(baris).to.have.length.gt(10);
});

cy.fixture("produk.csv") bisa memuat file non-JSON. Memisahkan header dengan .slice(1) lalu mengolah barisnya memungkinkan dataset ratusan baris diuji dengan satu logika.

#Mocking Data dan Request Stubs

#Menyimpan Respons API sebagai Fixture

Fixture sangat berguna untuk men-stub respons API. Simpan contoh respons sebagai fixture:

[
  { "id": 1, "nama": "Kopi", "harga": 45000 },
  { "id": 2, "nama": "Teh", "harga": 20000 }
]

Lalu arahkan cy.intercept untuk memakai fixture tersebut:

Stub API memakai fixture

cy.intercept("GET", "/api/produk", { fixture: "api/produk" }).as("produk");
 
cy.visit("/katalog");
cy.wait("@produk");
 
cy.get("[data-cy=produk]").should("have.length", 2);

cy.intercept("GET", "/api/produk", { fixture: "api/produk" }) mengganti respons asli dengan isi fixture. cy.wait("@produk") menunggu request yang tertangkap. Hasilnya: test berjalan cepat, deterministik, dan tanpa tergantung backend.

#Penutup

Episode 6 memperkenalkan fixtures sebagai sumber data test: menyimpan data statis di cypress/fixtures, memuatnya dengan cy.fixture() lalu memakai .as() atau .then(), menjalankan data-driven testing dengan array dan template literal, serta men-stub respons API memakai fixture lewat cy.intercept.

Inti yang harus dibawa pulang:

• Fixture adalah file data statis di cypress/fixtures.
• cy.fixture("users") memuat file; .as() membuatnya bisa diakses lewat this.
• Gunakan function () biasa, bukan arrow, saat mengakses this di test.
• Data-driven testing memakai loop forEach untuk membangun banyak test.
• Stub API dengan cy.intercept(..., { fixture }) membuat test deterministik.

Di episode 7 selanjutnya kita akan membahas custom commands dan utilities — menambahkan command kustom di commands.js, membuat helper reusable untuk test flows, mengatur baseUrl dan environment vars, serta mengorganisasi test utilities. Kosakata test kalian mulai bisa diperluas sendiri.