Vitest · Test ที่เชื่อถือได้
`afterEach()`
ล้าง state, resource หรือ mock หลังทุก test
afterEach() ทำ cleanup หลังทุก test
afterEach() เป็น lifecycle hook ที่ Vitest เรียกหลัง test แต่ละข้อ ใช้คืนสภาพแวดล้อมให้สะอาด เช่น ล้างรายการ resource ที่เปิดไว้, ปิด connection จำลอง หรือ reset state ที่ test เปลี่ยนไป จุดประสงค์คือไม่ให้ test ถัดไปได้รับผลข้างเคียง
ตัวอย่างนี้ใช้ array เป็น resource จำลอง เพื่อเห็นผลของ cleanup โดยยังไม่ใช้ mock cleanup API
กฎสำคัญ
cleanup สิ่งที่ test เปิดหรือเปลี่ยน
เช่น resource, event listener หรือ state ที่มีชีวิตข้ามบรรทัดใน test
อย่า cleanup สิ่งที่ไม่ใช่ของ test
hook ควรชัดว่าเป็นเจ้าของ side effect ใด ไม่ reset global ที่ส่วนอื่นต้องพึ่งพาโดยไม่ตั้งใจ
เห็นจังหวะก่อนและหลัง test
การทำ isolation มีสองด้าน: ก่อน test ต้องมี state พร้อมใช้ และหลัง test ต้องคืนสิ่งที่เปิดหรือเปลี่ยนไว้ ถ้าเข้าใจเป็นวงจรจะเลือกวาง setup กับ cleanup ได้ง่ายขึ้น
hook ไม่ได้แทนคำถามของ test แต่ช่วยจัดการ state รอบ ๆ คำถามนั้นให้ไม่รั่วไปข้ออื่น
beforeEach กับ afterEach เป็นคู่ของ isolation
| ช่วง | คำถาม |
|---|---|
| beforeEach | ก่อน test นี้เริ่ม ต้องเตรียมอะไรให้ใหม่ |
| Act ใน test | behavior ใดกำลังเปลี่ยน state |
| afterEach | หลัง test นี้จบ ต้องคืนอะไรให้สะอาด |
cleanup ไม่ได้แก้ test ที่ออกแบบผิด
ถ้า test อาศัยลำดับหรือซ่อน input ไว้มากเกินไป การเพิ่ม afterEach อย่างเดียวอาจทำให้ปัญหาซับซ้อนขึ้น ให้เริ่มจากระบุ state ownership ก่อน
แบบฝึก: เพิ่ม cleanup หลัง test
เติม afterEach ให้ resource กลับเป็นรายการว่างหลังแต่ละ test
งานที่ต้องทำ
- ใช้ openedTaskIds เป็น state ของตัวอย่าง
- ล้าง array ใน afterEach
- ตรวจว่า test ถัดไปเริ่มจากความยาวศูนย์
ลองทำด้วยตัวเองก่อน แล้วค่อยเปิดเฉลยเพื่อเทียบแนวคิดและรายละเอียด