Vitest · โครงสร้างของ Test

`describe()`

จัดกลุ่ม test ที่เกี่ยวข้องกับ function หรือ behavior เดียวกัน

จัดกลุ่มด้วย describe()

describe() สร้าง test suite หรือกลุ่มชื่อของ test ที่พูดถึง subject เดียวกัน เช่น function หรือ service เดียวกัน มันไม่ได้ตรวจผลลัพธ์เอง หน้าที่หลักคือทำให้โครงสร้างไฟล์และ output อ่านง่ายขึ้น

กลุ่ม test ของ function เดียวTS

เริ่มจาก suite ชั้นเดียวก่อน ยังไม่ต้องใช้ nested describe หลายชั้น

import { describe, test } from "vitest";

describe("createTask", () => {
  test("creates an incomplete task", () => {});
  test("keeps the supplied title", () => {});
});

เมื่อ test fail output จะมีชื่อ suite ช่วยบอกว่า behavior อยู่ใต้ subject ใด การจัดกลุ่มจึงเป็นเครื่องมือช่วยอ่านและ debug ไม่ใช่กลไกที่ทำให้ assertion ผ่าน

ดูความสัมพันธ์ของ suite กับ test

ให้คิดว่า `describe()` เป็นหัวข้อใหญ่ และ `test()` เป็นคำถามย่อยใต้หัวข้อนั้น `describe()` ไม่ได้เรียก function ที่กำลังทดสอบและไม่ได้ทำให้ assertion ผ่าน หน้าที่ของมันคือช่วยจัดชื่อและขอบเขตให้คนอ่านตามได้

อ่าน output แบบหัวข้อและคำถามย่อยTS

เมื่อเปิดดูผลลัพธ์ ชื่อ suite ช่วยตอบว่าเกี่ยวกับ subject ใด ส่วนชื่อ test ช่วยตอบว่ากรณีใดมีปัญหา

describe("findTask", () => {
  test("returns the matching task when the id exists", () => {});
  test("returns undefined when the id does not exist", () => {});
});

// output จะอ่านเป็นต้นไม้ประมาณนี้:
// findTask
//   ✓ returns the matching task when the id exists
//   ✓ returns undefined when the id does not exist

จัดกลุ่มเท่าที่ช่วยอ่าน

เหมาะกับ describe	ควรหลีกเลี่ยง
รวม test ของ completeTask	สร้าง suite ลึกหลายชั้นโดยไม่มีข้อมูลเพิ่ม
แยก behavior ของ service คนละตัว	ใช้ describe เพื่อแทนชื่อ test ที่ไม่ชัด
ทำให้ output อ่านเป็นหัวข้อ	จัดกลุ่ม test ที่ไม่เกี่ยวกันเพียงเพราะอยู่ไฟล์เดียว

กฎสำคัญ

subject

suite บอก subject

ชื่อ describe ควรตอบว่า test กลุ่มนี้กำลังพูดถึง function หรือ behavior ใด

behavior

test บอก expected behavior

ชื่อ test ด้านในควรบอกผลลัพธ์หรือเงื่อนไขของกรณีนั้น

แบบฝึก: วางโครง suite

Labโจทย์ + เฉลย

จัดกลุ่ม test ของ Task service

สร้าง describe หนึ่งกลุ่มและวาง test สองข้อไว้ข้างใน

งานที่ต้องทำ

ตั้ง suite เป็น findTask
เพิ่ม test สำหรับ id ที่พบ
เพิ่ม test สำหรับ id ที่ไม่พบ

ลองทำด้วยตัวเองก่อน แล้วค่อยเปิดเฉลยเพื่อเทียบแนวคิดและรายละเอียด

จัดกลุ่มด้วย describe()

กลุ่ม test ของ function เดียวTS

เริ่มจาก suite ชั้นเดียวก่อน ยังไม่ต้องใช้ nested describe หลายชั้น

import { describe, test } from "vitest";

describe("createTask", () => {
  test("creates an incomplete task", () => {});
  test("keeps the supplied title", () => {});
});

ดูความสัมพันธ์ของ suite กับ test

อ่าน output แบบหัวข้อและคำถามย่อยTS

describe("findTask", () => {
  test("returns the matching task when the id exists", () => {});
  test("returns undefined when the id does not exist", () => {});
});

// output จะอ่านเป็นต้นไม้ประมาณนี้:
// findTask
//   ✓ returns the matching task when the id exists
//   ✓ returns undefined when the id does not exist

จัดกลุ่มเท่าที่ช่วยอ่าน

เหมาะกับ describe	ควรหลีกเลี่ยง
รวม test ของ completeTask	สร้าง suite ลึกหลายชั้นโดยไม่มีข้อมูลเพิ่ม
แยก behavior ของ service คนละตัว	ใช้ describe เพื่อแทนชื่อ test ที่ไม่ชัด
ทำให้ output อ่านเป็นหัวข้อ	จัดกลุ่ม test ที่ไม่เกี่ยวกันเพียงเพราะอยู่ไฟล์เดียว

กฎสำคัญ

subject

suite บอก subject

ชื่อ describe ควรตอบว่า test กลุ่มนี้กำลังพูดถึง function หรือ behavior ใด

behavior

test บอก expected behavior

ชื่อ test ด้านในควรบอกผลลัพธ์หรือเงื่อนไขของกรณีนั้น

แบบฝึก: วางโครง suite

Labโจทย์ + เฉลย

จัดกลุ่ม test ของ Task service

สร้าง describe หนึ่งกลุ่มและวาง test สองข้อไว้ข้างใน

งานที่ต้องทำ

ตั้ง suite เป็น findTask
เพิ่ม test สำหรับ id ที่พบ
เพิ่ม test สำหรับ id ที่ไม่พบ

ลองทำด้วยตัวเองก่อน แล้วค่อยเปิดเฉลยเพื่อเทียบแนวคิดและรายละเอียด

จัดกลุ่มด้วย describe()

ดูความสัมพันธ์ของ suite กับ test

จัดกลุ่มเท่าที่ช่วยอ่าน

กฎสำคัญ

suite บอก subject

test บอก expected behavior

แบบฝึก: วางโครง suite

งานที่ต้องทำ

กำลังโหลดบทเรียน...

จัดกลุ่มด้วย describe()

ดูความสัมพันธ์ของ suite กับ test

จัดกลุ่มเท่าที่ช่วยอ่าน

กฎสำคัญ

suite บอก subject

test บอก expected behavior

แบบฝึก: วางโครง suite

งานที่ต้องทำ