Vitest คืออะไร? ใช้งานยังไง?

สวัสดีครับกลับมาพบกับบทความป้ายยาเครื่องมือดี ๆ ใช้ฟรี ๆ กันอีกครั้ง! วันนี้ผมจะพาทุกคนไปรู้จักกับ Vitest เครื่องมือที่จะใช้ในการทดสอบโค้ดที่ใช้ง่าย และไวกัน 💨

เขียนโดย

Sirasit Boonklang

บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 21 มีนาคม 2024

Share Tweet

Vitest คืออะไร?

Vitest เป็นเฟรมเวิร์กสำหรับทดสอบโค้ด JavaScript ที่ถูกพัฒนาโดย Vite ทีมพัฒนาเดียวกันกับ Vite.js ที่โด่งดังเรื่องความเร็วแรง เดี๋ยวนี้ตอนผมสร้างโปรเจกต์ React ก็ใช้เจ้า Vite นี่แหละ โดย Vitest จะรองรับการทดสอบทั้ง Unit Tests, Integration Tests และ End-to-End Tests แถม เร็วกว่า Jest ถึง 2-3 เท่า! เหมาะกับการทดสอบโค้ดจำนวนมาก

มือใหม่อยากลองเล่น เค้าก็มีเป็น Vitest Online ให้เราลองไปใช้ได้นะ https://stackblitz.com/edit/vitest-dev-vitest-2l5ntf?file=src%2Fbasic.ts,test%2Fbasic.test.ts&initialPath=__vitest__/

เริ่มต้นใช้งาน Vitest ในโปรเจกต์

1. ติดตั้ง Vitest

npm install -D vitest

โดยหมายเหตุไว้นิดนึงว่า Vitest 1.0 ต้องใช้ Vite >=v5.0.0 และ Node >=v18.00

2. เขียน Unit Test ด้วย Vitest

โดยเราจะมาเริ่มกันที่ฟังก์ชันง่าย ๆ อย่างฟังก์ชันที่ใช้ในการบวกเลขกัน  โดยการสร้างไฟล์ชื่อว่า sum.js โดยไฟล์นี้

// sum.js
export function sum(a, b) {
  return a + b
}

เมื่อเราได้ไฟล์หรือฟังก์ชันที่ต้องการทดสอบแล้วเราก็มาเขียนไฟล์ Test กันเลย โดยไฟล์ Test โดยไฟล์เทสจะต้องมีคำว่า “.test.” หรือ “.spec.” อยู่ในชื่อไฟล์ด้วย

// sum.test.js
import { expect, test } from 'vitest'
import { sum } from './sum'

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3)
})

สิ่งที่อยู่ในโค้ดตัวอย่าง (sum.test.js)

1. import { expect, test } from 'vitest' : เรียกใช้งานโมดูล expect และ test จาก Vitest
2. import { sum } from './sum' : โหลดฟังก์ชัน sum จากไฟล์ sum.js (ที่อยู่ในโฟลเดอร์เดียวกัน) เพื่อเอามารันเทส
3. test('adds 1 + 2 to equal 3', () => { ... }) :
   • test : ฟังก์ชันสำหรับสร้าง test case หรือกรณีที่เราทดสอบ
   • 'adds 1 + 2 to equal 3' : ข้อความที่ใช้อธิบายว่า test case นี้ทำอะไร
4. expect(sum(1, 2)).toBe(3) :
   • expect ใน Vitest คำสั่ง expect เป็นฟังก์ชันสำหรับสร้าง assertions เพื่อเอาไว้ดูว่าผลลัพธที่ได้จากโปรแกรมตรงกับค่าที่เราหวังมั้ย
   • expect(sum(1, 2)) : เป็นการเรียกฟังก์ชัน sum กับตัวเลข 1 และ 2 ใส่ไปใน expect เพื่อเอาค่าที่ได้นี้ไปเช็คกับ matcher ด้านล่าง
   • .toBe(3) : อันนี้เราเรียกว่า matcher ที่ชื่อ .toBe โดยมันจะทำการตรวจสอบว่าค่าใน Expect เท่ากันเป๊ะ ๆ กับ 3 มั้ย

โดย matcher ไม่ได้มีแค่ toBe เท่านั้น โดยใน Vitest มี matcher อื่น ๆ อีกมากมาย สามารถอ่านเพิ่มเติมเกี่ยวกับการใช้ matcher ได้ที่ลิงก์นี้ https://vitest.dev/api/expect-typeof.html#asserts

3. รันยังไง?

เมื่อเรามีฟังก์ชัน และเขียน Unit Test ให้กับฟังก์ชันเรียบร้อยแล้ว เราก็ต้องมาลองรันใช่มั้ยครับ โดยก่อนอื่นให้เราไปที่ไฟล์ package.json แล้วเปลี่ยนคำสั่ง test ใน scripts ให้เป็น vitest ดังนี้

package.json

{
  "scripts": {
    "test": "vitest"
  }
}

ตอนที่เรารันเราสามารกใช้คำสั่ง npm test ได้เลย แล้วเจ้าตัว vitest ก็จะแสดงข้อความตามนี้มา

• DEV v1.4.0 C:/Users/User/Content/Vitest_Example
  • DEV: หมายถึงโปรเจกต์นี้กำลังอยู่ในโหมด development (การพัฒนา)
  • v.1.4.0: เวอร์ชั่นของ Vitest ที่ใช้
  • C:/Users/User/Content/Vitest_Example: ตำแหน่งของโปรเจกต์
• ✓ sum.test.js (1)
  • ✓: สัญลักษณ์บอกว่า test case ในไฟล์ sum.test.js ผ่าน
  • (1): ระบุว่ามี test case จำนวน 1 ในไฟล์นี้
• ✓ adds 1 + 2 to equal 3
  • ข้อความอธิบาย test case ที่ผ่าน
• Test Files 1 passed (1): มี 1 test file ผ่าน
• Tests 1 passed (1): มี 1 test case ผ่าน
• Start at 10:28:05: เวลาเริ่มต้นรัน test
• Duration 270ms …: ระยะเวลาในการรัน test ทั้งหมด กับเวลาย่อยของแต่ละขั้นตอน
• PASS Waiting for file changes…: การทดสอบเสร็จสมบูรณ์ Vitest กำลังรอตรวจจับการเปลี่ยนแปลงไฟล์อยู่เพื่อทดสอบใหม่อีกครั้ง
  • press h to show help: กด ‘h’ เพื่อดูเมนูช่วยเหลือ
  • press q to quit: กด ‘q’ เพื่อออกจาก Vitest

4. การเปิดใช้งาน Test Coverage

เราสามารถดูว่าการเขียน Unit Test ของเรามันคลุมทุกฟังก์ชันเลยหรือป่าว ขาดตกส่วนไหนไปบ้างสามารถใช้ coverage ดูตรงนี้ได้

อย่างเช่นไฟล์ math.js

function add(x, y) {
  return x + y;
}

function subtract(x, y) {
  return x - y;
}

function multiply(x, y) {
  return x * y;
}

function divide(x, y) {
  if (y === 0) {
    throw new Error("Cannot divide by zero!");
  }
  return x / y;
}

module.exports = { add, subtract, multiply, divide };

แล้วทำการเขียน Unit Test โดยขาดการเทสฟังก์ชัน divide ไป

import { describe, it, expect } from "vitest";
import { add, subtract, multiply, divide } from "./math"; // Adjust the path if necessary

describe("math functions", () => {
  it("add", () => {
    expect(add(2, 3)).toBe(5);
    expect(add(0, 5)).toBe(5);
    expect(add(-3, 5)).toBe(2);
  });

  it("subtract", () => {
    expect(subtract(5, 3)).toBe(2);
    expect(subtract(0, 5)).toBe(-5);
    expect(subtract(-3, 5)).toBe(-8);
  });

  it("multiply", () => {
    expect(multiply(2, 3)).toBe(6);
    expect(multiply(0, 5)).toBe(0);
    expect(multiply(-3, 5)).toBe(-15);
  });
});

หากใช้ npm test เราจะเห็นแต่เทสผ่านกี่ไฟล์ กี่ฟังก์ชัน แต่ไม่เห็นว่าเทสครบมั้ย

หากเราจะเปิดใช้งาน coverage ให้ไปที่ไฟล์ package.json แล้วเพิ่ม “coverage”: “vitest run –coverage” ขึ้นมา

  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  },

หลังจากนั้นลองรันโดยใช้คำสั่ง

npm run coverage

จะเห็นได้ว่ามี coverage report เพิ่มมาให้

• ไฟล์ sum.js ถูกทดสอบครบถ้วน 100%
• ไฟล์ math.js มีบางส่วนที่ยังไม่ได้ทดสอบ: บรรทัด 13-18

• % Stmts: เปอร์เซ็นต์ของคำสั่งในไฟล์ที่ถูกทดสอบ
• % Branch: เปอร์เซ็นต์ของเงื่อนไขในไฟล์ที่ถูกทดสอบ
• % Funcs: เปอร์เซ็นต์ของฟังก์ชันในไฟล์ที่ถูกทดสอบ
• % Lines: เปอร์เซ็นต์ของบรรทัดในไฟล์ที่ถูกทดสอบ
• Uncovered Line #s: หมายเลขบรรทัดที่ไม่ได้ทดสอบ

Vitest UI

ซึ่งนอกจากนั้น Vitest ยังมี Report ที่เป็น UI สวย ๆ มาให้ใช้ได้ด้วย เพียงเราทำการติดตั้งโดยใช้คำสั่ง

npm i -D @vitest/ui

และทำการรันโดยการใช้คำสั่ง

npx vitest --ui

โดยเราสามารถดู Vitest UI ได้เลยที่ http://localhost:51204/__vitest__/

และนี่ก็จะวิธีการใช้งาน Vitest ในการทำ Unit Test สำหรับโค้ด JavaScript แบบง่าย ๆ ถ้าใครอยากไปลองเล่นต่อสามารถลองใช้งานตาม Document นี้ได้เลยยย https://vitest.dev/guide/why.html