Vitest · เริ่มคิดแบบ Test

Testing คืออะไร

ทำความเข้าใจว่าการ test คือการตรวจ behavior ที่ระบบควรทำ ไม่ใช่เพียงดูว่าโค้ดรันจบหรือไม่

Test กำลังถามคำถามอะไร

Test คือการเขียนคำถามที่ตรวจสอบได้ให้กับโปรแกรม เช่น “เมื่อส่ง Task ที่ยังไม่เสร็จเข้าไป ฟังก์ชันควรคืน Task ที่เสร็จแล้วหรือไม่” คำถามนี้มีทั้ง input, behavior ที่ระบบต้องทำ และผลลัพธ์ที่เราคาดหวัง จึงตรวจซ้ำได้ทุกครั้ง ไม่ต้องอาศัยการมองโค้ดแล้วเดา

คำถามของ test ในรูปโค้ดTS

ตอนนี้ยังไม่ต้องใช้ Vitest API ให้มอง test เป็น input → behavior → expected result ก่อน

const task = { id: 1, title: "อ่านบทเรียน", completed: false };

// Behavior ที่ต้องการพิสูจน์:
// completeTask(task) ควรคืน task ที่ completed เป็น true
const result = completeTask(task);

console.log(result.completed); // true

การที่โค้ดรันจบโดยไม่ throw error ไม่ได้แปลว่าโค้ดถูกเสมอไป ฟังก์ชันอาจคืนค่าผิดแต่ยังทำงานจบได้ Test ที่ดีจึงตรวจ behavior ที่ผู้ใช้หรือส่วนอื่นของระบบพึ่งพา ไม่ได้ตรวจแค่ว่าโปรแกรมไม่พัง

อ่านตัวอย่างจาก input ไป output

ก่อนเขียน test ให้ตามค่าผ่าน function ทีละขั้น เริ่มจาก input ที่ส่งเข้าไป ดูว่า function ทำอะไร แล้วจึงเขียน output ที่ควรได้ วิธีนี้ช่วยแยกคำว่า “โค้ดรันได้” ออกจาก “โค้ดคืนค่าถูก”

ตามค่าผ่าน function ทีละขั้นTS

input คือข้อมูลก่อนเรียก, output คือค่าที่ function คืน และ comment ท้ายบรรทัดคือสิ่งที่เราคาดว่าจะเห็นใน console

function completeTask(task: { id: number; completed: boolean }) {
  return { ...task, completed: true };
}

const input = { id: 1, completed: false };
const output = completeTask(input);

console.log(input.completed);  // false: input เดิมยังไม่เสร็จ
console.log(output.completed); // true: output ที่ต้องการ
console.log(output === input); // false: ได้ object ใหม่

จากตัวอย่างนี้ test ไม่จำเป็นต้องรู้ว่า function ใช้ spread operator หรือมีจำนวนบรรทัดเท่าไร สิ่งที่ต้องรักษาคือ output มี completed เป็น true และ input เดิมไม่ถูกเปลี่ยน หาก requirement ไม่ได้พูดถึง object ใหม่ ก็ไม่จำเป็นต้องตรวจเรื่อง reference เพิ่ม

จาก requirement เป็นกรณีทดสอบ

ส่วนของคำถาม	ตัวอย่างใน Task service
Input	Task ที่ completed เป็น false
Action	เรียก completeTask(task)
Expected behavior	คืน object ใหม่ที่ completed เป็น true
สิ่งที่ไม่ควรสรุปเกินจริง	ยังไม่จำเป็นต้องรู้ว่า implementation ใช้ spread หรือไม่

กฎสำคัญ

behavior

ตรวจสิ่งที่สำคัญต่อผู้ใช้

เขียน test จาก behavior หรือ contract ไม่ใช่จากบรรทัดโค้ดที่เห็นอยู่วันนี้

one intent

หนึ่ง test มีคำถามหลักหนึ่งข้อ

ถ้า fail ควรรู้ได้ทันทีว่าพฤติกรรมใดมีปัญหา ไม่ต้องไล่ดู assertion ที่ไม่เกี่ยวกันหลายข้อ

observable

ผลลัพธ์ต้องสังเกตได้

เลือกค่าหรือ side effect ที่สามารถอธิบายได้ชัดว่า “ถูก” หมายถึงอะไร

แบบฝึก: เขียนคำถามก่อนเขียน syntax

Labโจทย์ + เฉลย

แปลง requirement เป็น test question

ก่อนรู้จัก API ของ Vitest ให้ฝึกเขียนสิ่งที่ต้องตรวจเป็นภาษาคนก่อน นี่คือขั้นที่ช่วยป้องกันการเขียน test ที่ตรวจรายละเอียดผิดจุด

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

เขียน input ของ `completeTask` เป็นประโยคสั้น ๆ
เขียน behavior ที่ต้องเกิดขึ้นหลังเรียก function
เขียน expected result ที่สังเกตได้หนึ่งข้อ

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

Test กำลังถามคำถามอะไร

คำถามของ test ในรูปโค้ดTS

ตอนนี้ยังไม่ต้องใช้ Vitest API ให้มอง test เป็น input → behavior → expected result ก่อน

const task = { id: 1, title: "อ่านบทเรียน", completed: false };

// Behavior ที่ต้องการพิสูจน์:
// completeTask(task) ควรคืน task ที่ completed เป็น true
const result = completeTask(task);

console.log(result.completed); // true

อ่านตัวอย่างจาก input ไป output

ตามค่าผ่าน function ทีละขั้นTS

function completeTask(task: { id: number; completed: boolean }) {
  return { ...task, completed: true };
}

const input = { id: 1, completed: false };
const output = completeTask(input);

console.log(input.completed);  // false: input เดิมยังไม่เสร็จ
console.log(output.completed); // true: output ที่ต้องการ
console.log(output === input); // false: ได้ object ใหม่

จาก requirement เป็นกรณีทดสอบ

ส่วนของคำถาม	ตัวอย่างใน Task service
Input	Task ที่ completed เป็น false
Action	เรียก completeTask(task)
Expected behavior	คืน object ใหม่ที่ completed เป็น true
สิ่งที่ไม่ควรสรุปเกินจริง	ยังไม่จำเป็นต้องรู้ว่า implementation ใช้ spread หรือไม่

กฎสำคัญ

behavior

ตรวจสิ่งที่สำคัญต่อผู้ใช้

เขียน test จาก behavior หรือ contract ไม่ใช่จากบรรทัดโค้ดที่เห็นอยู่วันนี้

one intent

หนึ่ง test มีคำถามหลักหนึ่งข้อ

observable

ผลลัพธ์ต้องสังเกตได้

เลือกค่าหรือ side effect ที่สามารถอธิบายได้ชัดว่า “ถูก” หมายถึงอะไร

แบบฝึก: เขียนคำถามก่อนเขียน syntax

Labโจทย์ + เฉลย

แปลง requirement เป็น test question

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

เขียน input ของ `completeTask` เป็นประโยคสั้น ๆ
เขียน behavior ที่ต้องเกิดขึ้นหลังเรียก function
เขียน expected result ที่สังเกตได้หนึ่งข้อ

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

Test กำลังถามคำถามอะไร

อ่านตัวอย่างจาก input ไป output

จาก requirement เป็นกรณีทดสอบ

กฎสำคัญ

ตรวจสิ่งที่สำคัญต่อผู้ใช้

หนึ่ง test มีคำถามหลักหนึ่งข้อ

ผลลัพธ์ต้องสังเกตได้

แบบฝึก: เขียนคำถามก่อนเขียน syntax

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

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

Test กำลังถามคำถามอะไร

อ่านตัวอย่างจาก input ไป output

จาก requirement เป็นกรณีทดสอบ

กฎสำคัญ

ตรวจสิ่งที่สำคัญต่อผู้ใช้

หนึ่ง test มีคำถามหลักหนึ่งข้อ

ผลลัพธ์ต้องสังเกตได้

แบบฝึก: เขียนคำถามก่อนเขียน syntax

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