Testing, Debugging, dan Kualitas Kode · 4/7

Unit, integration, dan end-to-end

Berapa biaya masing-masing, apa yang ditangkap masing-masing, dan berapa banyak yang sebenarnya kamu perlukan.

Baca 25 menit

Setelah pelajaran ini kamu bisa

Membedakan test unit, integration, dan end-to-end
Menjelaskan pertukaran yang dibuat masing-masingnya
Menentukan berapa banyak yang kamu inginkan dari masing-masingnya
Menjelaskan biaya sebuah test yang flaky

	Unit	Integration	End-to-end
Menguji	Satu function atau component	Beberapa bagian bersamaan	Seluruh aplikasi di browser
Kecepatan	Milidetik	Puluhan ms sampai detik	Detik sampai menit
Menangkap	Kesalahan logika	Kesalahan perakitan	Apa pun, termasuk konfigurasi deploy
Melewatkan	Semua soal perakitan	Perilaku browser sungguhan	Tidak ada — tapi lambat
Saat gagal	Kamu tahu persis di mana	Kira-kira di mana	Di suatu tempat di aplikasinya
Alat	vitest	vitest	Playwright, Cypress

Saran klasiknya adalah sebuah piramida: banyak unit test yang cepat, lebih sedikit integration test, dan segelintir test end-to-end. Alasannya hitungan, bukan ideologi.

Coba sendiri

Hitungan di balik piramidanya. Bandingkan total waktu jalan dan apa yang ditangkap masing-masing komposisi.

const COST = { unit: 3, integration: 120, e2e: 4000 };   // milliseconds each

// Roughly what share of real bugs each kind tends to catch on its own.
const CATCHES = { unit: 0.5, integration: 0.75, e2e: 0.9 };

function evaluate(name, mix) {
  const total = Object.entries(mix).reduce((ms, [kind, n]) => ms + n * COST[kind], 0);
  // Bugs missed by every layer, assuming they are roughly independent.
  const missed = Object.entries(mix).reduce(
    (p, [kind, n]) => (n > 0 ? p * (1 - CATCHES[kind]) : p), 1
  );
  const count = Object.values(mix).reduce((a, b) => a + b, 0);
  return {
    name: name,
    count: count,
    seconds: (total / 1000).toFixed(1),
    caught: ((1 - missed) * 100).toFixed(0) + "%",
  };
}

const mixes = [
  ["pyramid", { unit: 400, integration: 40, e2e: 5 }],
  ["all unit", { unit: 800, integration: 0, e2e: 0 }],
  ["ice cream cone", { unit: 20, integration: 40, e2e: 120 }],
  ["nothing but e2e", { unit: 0, integration: 0, e2e: 200 }],
];

console.log("mix".padEnd(18) + "tests".padStart(6) + "runtime".padStart(11) + "  bug classes covered");
for (const [name, mix] of mixes) {
  const r = evaluate(name, mix);
  console.log(r.name.padEnd(18) + String(r.count).padStart(6) + (r.seconds + "s").padStart(11) + "  " + r.caught);
}

// Compare the two mixes that cover a similar breadth of bugs.
const pyramid = evaluate("pyramid", { unit: 400, integration: 40, e2e: 5 });
const cone = evaluate("cone", { unit: 20, integration: 40, e2e: 120 });

console.log("");
console.log("The pyramid and the ice cream cone cover a similar breadth:");
console.log("   pyramid " + pyramid.caught + " in " + pyramid.seconds + "s");
console.log("   cone    " + cone.caught + " in " + cone.seconds + "s  (" +
  Math.round(Number(cone.seconds) / 60) + " minutes)");
console.log("   the cone is " + Math.round(Number(cone.seconds) / Number(pyramid.seconds)) +
  "x slower for the same coverage");
console.log("");
console.log("That difference decides whether the suite runs on every save,");
console.log("or gets skipped because nobody waits for it.");

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Test yang flaky

Test flaky kadang lolos dan kadang gagal tanpa perubahan kode. Ia lebih buruk daripada test yang tidak ada, karena ia menghancurkan otoritas suite-nya: begitu orang menjalankan ulang CI supaya jadi hijau, kegagalan sungguhan pun ikut dijalankan ulang.

Penyebab	Perbaikan
Menunggu jumlah ms yang tetap	Tunggu sebuah kondisi — `await screen.findByRole(...)`
Test berbagi state	Reset di antara test; proyek ini membersihkan tabelnya di `beforeEach`
Bergantung pada urutan test	Setiap test harus menyiapkan sendiri semua yang dibutuhkannya
Tanggal sungguhan dan `Math.random()`	Suntikkan nilainya, atau bekukan waktunya
Panggilan jaringan sungguhan	Stub — internet bukan fixture test-mu
Perbedaan zona waktu atau locale	Tetapkan keduanya; jalankan CI dengan `TZ` berbeda untuk menangkapnya

Tugas praktik

Jalankan bun run test dan catat total waktunya. Lalu jalankan bun run test curriculum dan bandingkan. Sekarang sengaja buat sebuah test bergantung pada urutan: di progress.node.test.ts, pindahkan satu test ke atas beforeAll yang membuat user-nya lalu lihat ia gagal. Kegagalan itulah bentuk dari ketergantungan urutan.

Hasil yang diharapkan

Seluruh suite dalam beberapa detik; kegagalan yang jelas saat setup-nya dilewati.