Vitest · Mocks และ Spies

`vi.spyOn()`

เฝ้าดู method เดิมบน object โดยยังคงอ้างอิง implementation จริง

spyOn เฝ้าดู method เดิม

vi.spyOn(object, method) สร้าง spy ให้ method บน object โดยเริ่มจาก implementation เดิม Spy จึงต่างจาก vi.fn ที่เป็น function ใหม่: spy ช่วยบันทึก interaction ของ method ที่มีอยู่แล้ว และโดยค่าเริ่มต้นยังทำงานตาม implementation เดิม

spy method ที่มี implementation จริงTS

ในหน้านี้ยังไม่เปลี่ยน return value ของ spy ให้ดูความต่างระหว่าง observe กับ replace ก่อน

const calculator = {
  multiply(a: number, b: number) {
    return a * b;
  },
};

test("tracks calculator usage", () => {
  const multiplySpy = vi.spyOn(calculator, "multiply");

  expect(calculator.multiply(3, 4)).toBe(12);
  expect(multiplySpy).toHaveBeenCalledWith(3, 4);
});

เครื่องมือ	เริ่มจากอะไร	เหมาะกับ
vi.fn()	function ใหม่ที่ไม่มี implementation จำเป็น	สร้าง dependency double ใน test
vi.spyOn()	method เดิมบน object	ดู interaction ขณะ implementation จริงยังทำงาน

แยกสิ่งที่ spy ทำออกเป็นสองส่วน

เมื่อสร้าง spy จะเกิดสองอย่างพร้อมกัน: method เดิมยังถูกเรียกเพื่อให้ได้ผลลัพธ์จริง และ spy บันทึกหลักฐานการเรียกไว้ให้ตรวจภายหลัง ถ้าต้องการแทน implementation หรือควบคุมค่าที่คืน ค่อยใช้ mock behavior เพิ่มอย่างระมัดระวัง

ผลลัพธ์จริงกับหลักฐานอยู่คู่กันTS

ถ้าเห็นทั้ง result และ spy history แปลว่า spy กำลัง observe method เดิม ไม่ได้แทน method ด้วย function ว่างแบบ vi.fn

const calculator = {
  multiply: (a: number, b: number) => a * b,
};

const spy = vi.spyOn(calculator, "multiply");
const result = calculator.multiply(3, 4);

console.log(result); // 12 จาก implementation เดิม
console.log(spy.mock.calls); // [[3, 4]] จาก history

Spy ไม่ได้แปลว่า mock ทุกอย่าง

กฎสำคัญ

observe

เลือก spy เมื่อ method จริงยังเหมาะ

ถ้าต้องการผลลัพธ์จริงและอยากตรวจว่า method ถูกใช้ ให้ spy แทนการเขียน mock implementation ใหม่

restore

ระวังการเปลี่ยน object เดิม

spy แตะ method ของ object จริง จึงต้องวางแผนคืน implementation หลัง test ตามบทถัดไป

อย่าลืมว่า spy มีผลข้างเคียงต่อ object

ถ้าไม่คืน method เดิม test ถัดไปอาจเห็น spy หรือ implementation ที่ถูกเปลี่ยน การ cleanup เป็นส่วนหนึ่งของการใช้ spy อย่างปลอดภัย

แบบฝึก: สร้าง spy บน calculator

Labโจทย์ + เฉลย

ตรวจการเรียก method จริง

สร้าง spy บน calculator.multiply แล้วตรวจทั้งผลลัพธ์และ arguments

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

สร้าง spy ด้วย vi.spyOn
เรียก multiply(3, 4)
ตรวจผลลัพธ์เป็น 12 และตรวจ arguments

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

spyOn เฝ้าดู method เดิม

spy method ที่มี implementation จริงTS

ในหน้านี้ยังไม่เปลี่ยน return value ของ spy ให้ดูความต่างระหว่าง observe กับ replace ก่อน

const calculator = {
  multiply(a: number, b: number) {
    return a * b;
  },
};

test("tracks calculator usage", () => {
  const multiplySpy = vi.spyOn(calculator, "multiply");

  expect(calculator.multiply(3, 4)).toBe(12);
  expect(multiplySpy).toHaveBeenCalledWith(3, 4);
});

เครื่องมือ	เริ่มจากอะไร	เหมาะกับ
vi.fn()	function ใหม่ที่ไม่มี implementation จำเป็น	สร้าง dependency double ใน test
vi.spyOn()	method เดิมบน object	ดู interaction ขณะ implementation จริงยังทำงาน

แยกสิ่งที่ spy ทำออกเป็นสองส่วน

ผลลัพธ์จริงกับหลักฐานอยู่คู่กันTS

const calculator = {
  multiply: (a: number, b: number) => a * b,
};

const spy = vi.spyOn(calculator, "multiply");
const result = calculator.multiply(3, 4);

console.log(result); // 12 จาก implementation เดิม
console.log(spy.mock.calls); // [[3, 4]] จาก history

Spy ไม่ได้แปลว่า mock ทุกอย่าง

กฎสำคัญ

observe

เลือก spy เมื่อ method จริงยังเหมาะ

restore

ระวังการเปลี่ยน object เดิม

spy แตะ method ของ object จริง จึงต้องวางแผนคืน implementation หลัง test ตามบทถัดไป

อย่าลืมว่า spy มีผลข้างเคียงต่อ object

แบบฝึก: สร้าง spy บน calculator

Labโจทย์ + เฉลย

ตรวจการเรียก method จริง

สร้าง spy บน calculator.multiply แล้วตรวจทั้งผลลัพธ์และ arguments

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

สร้าง spy ด้วย vi.spyOn
เรียก multiply(3, 4)
ตรวจผลลัพธ์เป็น 12 และตรวจ arguments

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

spyOn เฝ้าดู method เดิม

แยกสิ่งที่ spy ทำออกเป็นสองส่วน

Spy ไม่ได้แปลว่า mock ทุกอย่าง

กฎสำคัญ

เลือก spy เมื่อ method จริงยังเหมาะ

ระวังการเปลี่ยน object เดิม

แบบฝึก: สร้าง spy บน calculator

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

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

spyOn เฝ้าดู method เดิม

แยกสิ่งที่ spy ทำออกเป็นสองส่วน

Spy ไม่ได้แปลว่า mock ทุกอย่าง

กฎสำคัญ

เลือก spy เมื่อ method จริงยังเหมาะ

ระวังการเปลี่ยน object เดิม

แบบฝึก: สร้าง spy บน calculator

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