Vitest · เริ่มต้นกับ Vitest

Vitest คืออะไร

รู้จักบทบาทของ Vitest ในฐานะเครื่องมือค้นหาและรัน test

Vitest คืออะไร และอยู่ตรงไหนใน workflow

Vitest คือ testing framework และ test runner สำหรับโปรเจกต์ JavaScript/TypeScript ที่ทำงานร่วมกับ Vite ได้ดี หน้าที่ของมันคือค้นหาไฟล์ test โหลด source code รันกรณีทดสอบ ตรวจผลที่เราเขียนไว้ และสรุปหลักฐานให้เห็นใน terminal

คำว่า test runner หมายถึงเครื่องมือที่เป็นคนเริ่มและควบคุมการรัน ส่วน testing framework คือชุดกติกาและ API ที่ช่วยให้เราเขียนกรณีทดสอบ ทั้งสองบทบาทอยู่ในเครื่องมือเดียวกันเมื่อเราใช้ Vitest

เส้นทางของการ test runTEXT

นี่เป็นภาพรวมการทำงานเพื่อช่วยให้เห็นบทบาทของแต่ละส่วน ไม่ใช่ code ที่ต้อง copy ไปรัน

source code
    ↓ ถูก import โดยไฟล์ test
test file
    ↓ ถูกค้นพบโดยคำสั่ง Vitest
Vitest runner
    ↓ รันและตรวจกรณีทดสอบ
terminal report
    passed / failed + รายละเอียดสำหรับตรวจต่อ

แยกบทบาทของ source, test file และ runner

ให้คิดว่า source code คือสิ่งที่ระบบทำจริง test file คือชุดคำถามที่เราเขียนเพื่อบอก behavior ที่ควรรักษาไว้ และ Vitest คือผู้จัดการให้คำถามเหล่านั้นถูกรันซ้ำอย่างเป็นระบบ

ตัวอย่างบทบาทของแต่ละไฟล์TEXT

ไฟล์ทั้งสามส่วนทำงานร่วมกัน แต่ Vitest ไม่ใช่ source code และไม่ใช่ผู้ตัดสินว่า requirement ของธุรกิจควรเป็นอย่างไร

src/task-service.ts
  หน้าที่: มี function ของ Task service

src/task-service.test.ts
  หน้าที่: บันทึกกรณีที่ต้องการตรวจ

package.json
  หน้าที่: เก็บคำสั่งที่ทีมใช้เรียก Vitest

pnpm test
  จุดเริ่มต้น: Vitest ค้นหา → รัน → สรุปผล

เมื่อผลไม่ตรงที่คาด ให้แยกคำถามออกจากกัน: source ทำงานผิดหรือไม่, สิ่งที่ test คาดหวังถูกต้องหรือไม่, และ runner ค้นพบไฟล์ที่เราตั้งใจไว้หรือไม่ การแยกบทบาทช่วยให้เริ่มตรวจได้ถูกจุด

สิ่งที่ Vitest ช่วย และสิ่งที่เรายังต้องตัดสินใจเอง

Vitest ช่วยทำอะไร	ผู้เขียนยังต้องตัดสินใจเอง
ค้นหาและรัน test files	ควรทดสอบ requirement ข้อใด
รายงานผลผ่าน/ไม่ผ่านและรายละเอียดความต่าง	behavior ที่ถูกต้องของ Task service คืออะไร
จัดการ workflow การรันและเครื่องมือทดสอบ	กรณีใดสำคัญพอที่จะต้องมี test

Vitest ไม่ได้ทำให้โค้ดถูกโดยอัตโนมัติ

เรายังต้องกำหนด expected behavior และเขียนกรณีทดสอบให้สื่อคำถามที่ต้องการตรวจ Vitest ช่วยทำให้คำถามนั้นถูกรันซ้ำและแจ้งเมื่อผลเปลี่ยน

กฎสำคัญ

boundary

แยกเครื่องมือออกจาก requirement

Vitest ตรวจตามสิ่งที่เราเขียนไว้ ไม่ได้สร้าง requirement หรือเลือก behavior ที่ถูกต้องแทนทีม

workflow

เริ่มจาก project dependency

ติดตั้ง Vitest ไว้ในโปรเจกต์เพื่อให้ทุกคนใช้คำสั่งและ version จาก project เดียวกัน

สรุปภาพรวมก่อนเริ่มติดตั้ง

ก่อนเปิด terminal ให้จำเส้นทางสั้น ๆ นี้: เรามี source code ที่ต้องการตรวจ มี test file ที่บอกคำถาม มี package script ที่เป็นคำสั่งเรียก และมี Vitest ที่ค้นหาแล้วรันทุกส่วนให้เรา

แผนที่ของโปรเจกต์TEXT

บทถัดไปจะเริ่มจากการเพิ่ม Vitest เป็น development dependency ในโปรเจกต์

Task service project
  source code + test file
          ↓
  package.json: scripts.test
          ↓
  pnpm test
          ↓
  Vitest report

ยังไม่ต้องจำ API สำหรับเขียน test

ช่วงนี้ให้เข้าใจบทบาทและ workflow ก่อน เรื่องการประกาศ test case และการตรวจผลจะอยู่ใน phase โครงสร้างของ Test และ Assertions