Vitest · Mocks และ Spies

`vi.fn()`

สร้าง mock function และเก็บประวัติการเรียก, argument และ return value

vi.fn() สร้าง mock function

vi.fn() สร้าง function ตัวแทนที่เรียกได้เหมือน function ปกติ และเก็บข้อมูลการเรียกไว้ เช่น ถูกเรียกกี่ครั้ง รับ arguments อะไร และคืนค่าใด เริ่มจากสร้าง mock ใน test เองก่อน ยังไม่ต้อง mock module ทั้งไฟล์

สร้าง mock function ใน testTS

mock นี้ไม่ได้ส่งข้อความจริง แต่เก็บหลักฐานว่าถูกเรียกหรือไม่

import { expect, test, vi } from "vitest";

test("records a task notification", () => {
  const notify = vi.fn();

  notify("task-completed");

  expect(notify).toHaveBeenCalled();
});

กฎสำคัญ

calls

mock function มี call history

หลังเรียก notify เราสามารถตรวจ interaction ได้โดยไม่ต้องมีระบบส่ง notification จริง

isolation

สร้างในขอบเขตที่เหมาะสม

สร้าง mock ใหม่ต่อ test เมื่อ call history ไม่ควรถูกแชร์

mock function ใช้ควบคุมหรือสังเกต

เป้าหมาย	ตัวอย่าง
สังเกต	ตรวจว่า notifier ถูกเรียกด้วย event ที่ถูกต้อง
ควบคุม	กำหนดให้ dependency คืนค่าที่ test ต้องการ
แยก boundary	ไม่ต้องส่ง network หรือเขียนข้อมูลจริง

vi.fn() ไม่ได้แทน function จริงโดยอัตโนมัติ

มันเป็น function ที่เราสร้างขึ้นใน test ถ้าต้องการให้มี behavior เฉพาะ ต้องกำหนด return value หรือ implementation ในหน้าถัดไป

ดู call history หลังเรียก mock

จุดเด่นของ vi.fn ไม่ใช่แค่การสร้าง function ที่เรียกได้ แต่คือการเก็บหลักฐานไว้ให้เราตรวจภายหลัง ทุกครั้งที่เรียก mock จะมีข้อมูลว่าเรียกกี่ครั้งและส่ง argument อะไร

มอง mock เป็นสมุดบันทึกการเรียกTS

การอ่าน mock.calls ช่วยให้เห็นข้อมูลดิบของ history ก่อนเลือก matcher ที่ทำให้ assertion อ่านง่ายขึ้น

const notify = vi.fn();

notify("task-completed");
notify("task-reviewed");

console.log(notify.mock.calls.length); // 2
console.log(notify.mock.calls[0]); // ["task-completed"]
console.log(notify.mock.calls[1]); // ["task-reviewed"]

สิ่งที่สังเกต	ข้อมูลที่อยู่ใน history
จำนวนครั้ง	ความยาวของ mock.calls
argument ครั้งแรก	mock.calls[0]
argument ครั้งล่าสุด	สมาชิกตัวท้ายของ history

แบบฝึก: สร้าง mock notifier

Labโจทย์ + เฉลย

เก็บหลักฐานการแจ้งเตือน

สร้าง mock function แล้วเรียกเมื่อ Task ถูก complete

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

import vi และสร้าง notify ด้วย vi.fn()
เรียก notify ด้วย event task-completed
ตรวจว่า notify ถูกเรียก

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

vi.fn() สร้าง mock function

สร้าง mock function ใน testTS

mock นี้ไม่ได้ส่งข้อความจริง แต่เก็บหลักฐานว่าถูกเรียกหรือไม่

import { expect, test, vi } from "vitest";

test("records a task notification", () => {
  const notify = vi.fn();

  notify("task-completed");

  expect(notify).toHaveBeenCalled();
});

กฎสำคัญ

calls

mock function มี call history

หลังเรียก notify เราสามารถตรวจ interaction ได้โดยไม่ต้องมีระบบส่ง notification จริง

isolation

สร้างในขอบเขตที่เหมาะสม

สร้าง mock ใหม่ต่อ test เมื่อ call history ไม่ควรถูกแชร์

mock function ใช้ควบคุมหรือสังเกต

เป้าหมาย	ตัวอย่าง
สังเกต	ตรวจว่า notifier ถูกเรียกด้วย event ที่ถูกต้อง
ควบคุม	กำหนดให้ dependency คืนค่าที่ test ต้องการ
แยก boundary	ไม่ต้องส่ง network หรือเขียนข้อมูลจริง

vi.fn() ไม่ได้แทน function จริงโดยอัตโนมัติ

ดู call history หลังเรียก mock

มอง mock เป็นสมุดบันทึกการเรียกTS

const notify = vi.fn();

notify("task-completed");
notify("task-reviewed");

console.log(notify.mock.calls.length); // 2
console.log(notify.mock.calls[0]); // ["task-completed"]
console.log(notify.mock.calls[1]); // ["task-reviewed"]

สิ่งที่สังเกต	ข้อมูลที่อยู่ใน history
จำนวนครั้ง	ความยาวของ mock.calls
argument ครั้งแรก	mock.calls[0]
argument ครั้งล่าสุด	สมาชิกตัวท้ายของ history

แบบฝึก: สร้าง mock notifier

Labโจทย์ + เฉลย

เก็บหลักฐานการแจ้งเตือน

สร้าง mock function แล้วเรียกเมื่อ Task ถูก complete

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

import vi และสร้าง notify ด้วย vi.fn()
เรียก notify ด้วย event task-completed
ตรวจว่า notify ถูกเรียก

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

vi.fn() สร้าง mock function

กฎสำคัญ

mock function มี call history

สร้างในขอบเขตที่เหมาะสม

mock function ใช้ควบคุมหรือสังเกต

ดู call history หลังเรียก mock

แบบฝึก: สร้าง mock notifier

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

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

vi.fn() สร้าง mock function

กฎสำคัญ

mock function มี call history

สร้างในขอบเขตที่เหมาะสม

mock function ใช้ควบคุมหรือสังเกต

ดู call history หลังเรียก mock

แบบฝึก: สร้าง mock notifier

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