Hello Vitest
บทนี้จะพาเริ่มจากศูนย์แบบง่ายที่สุดสำหรับ Node + TypeScript โดยใช้ Vitest ตั้งแต่ติดตั้ง dependency, เพิ่ม script รัน test, สร้าง function `helloVitest`, และเขียน test แรกที่รันได้จริงด้วย workflow ที่ตรงกับ Vitest โดยตรง
Step 1
Step 1: เริ่มโปรเจกต์และติดตั้ง dependencies ที่จำเป็น
Vitest ทำงานกับ TypeScript ได้ดีโดยตรง จึงไม่ต้องพึ่งตัวแปลงไฟล์เพิ่มเติมสำหรับบทเริ่มต้นนี้ เราใช้แค่ `vitest` กับ `typescript` ก็พอสำหรับเริ่มเขียนและรัน test ได้จริง
ถ้ามี `package.json` อยู่แล้วสามารถข้าม `pnpm init` ได้ แล้วติดตั้ง dependency หลักของ Vitest พร้อม TypeScript
Step 2
Step 2: เพิ่ม script สำหรับรัน test
เพิ่ม script ชื่อ `test` ใน `package.json` แล้วชี้ไปที่ `vitest run` เพื่อให้คำสั่ง `pnpm test` รัน test ทั้งหมดแบบ one-shot ได้ชัดเจน เหมาะกับผู้เริ่มต้นและอ่านผลลัพธ์ง่าย
เก็บ fields อื่นไว้ตามเดิม แล้วเพิ่มเฉพาะ `scripts.test`
Step 3
Step 3: สร้าง tsconfig.json สำหรับโปรเจกต์ TypeScript
ถึง Vitest จะเข้าใจ TypeScript ได้ดี แต่เรายังควรมี `tsconfig.json` สำหรับกำหนดค่าพื้นฐานของโปรเจกต์ เช่น module, target, และความเข้มของ type checking
ใช้คำสั่งของ TypeScript เพื่อสร้างไฟล์ตั้งต้นขึ้นมาก่อน
Step 4
Step 4: สร้างไฟล์ hello-vitest.ts
เริ่มจาก function ที่ง่ายที่สุดก่อน เพื่อให้เห็นภาพการทดสอบได้ชัดเจน โดย function นี้จะคืนข้อความ `Hello Vitest` กลับมา
ใช้ named export เพื่อให้ import ไปทดสอบได้ตรง ๆ
Step 5
Step 5: สร้างไฟล์ hello-vitest.test.ts
ใน test file ให้ import APIs จาก `vitest` โดยตรง แล้ว import function ที่ต้องการทดสอบ จากนั้นเขียน assertion เพื่อตรวจว่าผลลัพธ์ตรงกับที่เราคาดหวัง
นี่คือโครงพื้นฐานของ Vitest test: import สิ่งที่ใช้, รัน function, และ assert ผลลัพธ์
Step 6
Step 6: รันคำสั่ง test
เมื่อทุกอย่างพร้อมแล้ว ให้รัน `pnpm test` ถ้า setup ถูกต้อง Vitest จะรัน test ทั้งหมดแบบครั้งเดียวและสรุปผลให้ชัดเจนว่ามีกี่ไฟล์กี่เคสที่ผ่าน ตัวอย่างด้านล่างคือ output ที่ควรเห็นในเคสเริ่มต้นนี้
รัน Vitest ผ่าน script ใน `package.json`
อ่านข้อความนี้เป็น 3 ชั้น: ระดับไฟล์ test, ระดับ test suite, และสรุปรวมของทั้งรอบการรัน
Step 7
Step 7: สรุปสิ่งที่ได้
ตอนนี้คุณมีโปรเจกต์ Node แบบ TypeScript ที่ติดตั้ง Vitest แล้ว มี `tsconfig.json` ที่รองรับ test globals ของ Vitest, มี function ตัวอย่าง และมี test แรกที่รันได้จริงด้วย workflow ที่เรียบง่ายและตรงกับ Vitest โดยตรง
Step 8
Step 8: อ่าน output ของ Vitest แต่ละส่วน
บรรทัดที่ขึ้นหลังรัน test ไม่ได้มีไว้แค่บอกว่าผ่านหรือไม่ผ่าน แต่มันช่วยให้เราอ่านโครงสร้างของ test run ได้ด้วย เช่น ตอนนี้มีไฟล์ test กี่ไฟล์, มี test case กี่ตัว, และเวลาแต่ละช่วงถูกใช้ไปประมาณเท่าไร
อ่านข้อความแต่ละบรรทัดแบบนี้แล้วจะเริ่ม debug หรือเช็กความผิดปกติของรอบการรันได้ง่ายขึ้น