Vitest · Async Tests

`await` ใน Test

รอ Promise ให้เสร็จก่อนจึงตรวจผลลัพธ์

await คือจุดที่หยุดรอผลลัพธ์

await ทำให้โค้ดใน async function รอ Promise ให้ settle ก่อนจึงไปบรรทัดถัดไป ใน test เราจึงใช้ await ระหว่าง Act กับ Assert เพื่อไม่ให้ assertion ตรวจ Promise object หรือค่าที่ยังมาไม่ถึง

วาง await ก่อน assertionTS

หลัง await ตัวแปร task เป็นค่าที่ Promise resolve แล้ว ไม่ใช่ Promise ตัวเดิม

test("loads the task before asserting", async () => {
  // Act: รอผลจาก asynchronous behavior
  const task = await loadTask(1);

  // Assert: ตอนนี้ task เป็นค่าที่ resolve แล้ว
  expect(task).toEqual({
    id: 1,
    title: "อ่านบทเรียน",
    completed: false,
  });
});

รูปแบบ	ความหมาย
expect(loadTask(1)).toEqual(...)	กำลังส่ง Promise เข้า matcher ของ value
expect(await loadTask(1)).toEqual(...)	รอแล้วจึงตรวจค่าที่ resolve
const task = await loadTask(1)	แยก Act ให้เห็นชัดและ debug ง่าย

ก่อน await กับหลัง await เป็นคนละชนิดค่า

ก่อน await ตัวแปรที่ได้จาก async function คือ Promise ซึ่งเป็นเหมือนใบรับของที่บอกว่า “ผลลัพธ์จะมา” ส่วนหลัง await จึงได้ Task ที่นำ property อย่าง id หรือ title ไปตรวจได้

เปรียบเทียบค่าก่อนและหลัง awaitTS

ความเข้าใจเรื่องชนิดของค่าช่วยอธิบายว่าทำไม expect(loadTask(1)) จึงไม่เหมือน expect(await loadTask(1))

const pending = loadTask(1);
// pending เป็น Promise<Task>

const task = await pending;
// task เป็น Task ที่ resolve แล้ว

expect(task.title).toBe("อ่านบทเรียน");

แบบฝึก: วาง await ให้ถูกจุด

Labโจทย์ + เฉลย

แก้ test ที่ตรวจเร็วเกินไป

เปลี่ยน test ให้รอ loadTask ก่อนตรวจผลลัพธ์

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

ทำ callback เป็น async
วาง await หน้า loadTask
ตรวจ title ที่ได้กลับมา

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

await คือจุดที่หยุดรอผลลัพธ์

วาง await ก่อน assertionTS

หลัง await ตัวแปร task เป็นค่าที่ Promise resolve แล้ว ไม่ใช่ Promise ตัวเดิม

test("loads the task before asserting", async () => {
  // Act: รอผลจาก asynchronous behavior
  const task = await loadTask(1);

  // Assert: ตอนนี้ task เป็นค่าที่ resolve แล้ว
  expect(task).toEqual({
    id: 1,
    title: "อ่านบทเรียน",
    completed: false,
  });
});

รูปแบบ	ความหมาย
expect(loadTask(1)).toEqual(...)	กำลังส่ง Promise เข้า matcher ของ value
expect(await loadTask(1)).toEqual(...)	รอแล้วจึงตรวจค่าที่ resolve
const task = await loadTask(1)	แยก Act ให้เห็นชัดและ debug ง่าย

ก่อน await กับหลัง await เป็นคนละชนิดค่า

เปรียบเทียบค่าก่อนและหลัง awaitTS

const pending = loadTask(1);
// pending เป็น Promise<Task>

const task = await pending;
// task เป็น Task ที่ resolve แล้ว

expect(task.title).toBe("อ่านบทเรียน");

แบบฝึก: วาง await ให้ถูกจุด

Labโจทย์ + เฉลย

แก้ test ที่ตรวจเร็วเกินไป

เปลี่ยน test ให้รอ loadTask ก่อนตรวจผลลัพธ์

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

ทำ callback เป็น async
วาง await หน้า loadTask
ตรวจ title ที่ได้กลับมา

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

await คือจุดที่หยุดรอผลลัพธ์

ก่อน await กับหลัง await เป็นคนละชนิดค่า

แบบฝึก: วาง await ให้ถูกจุด

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

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

await คือจุดที่หยุดรอผลลัพธ์

ก่อน await กับหลัง await เป็นคนละชนิดค่า

แบบฝึก: วาง await ให้ถูกจุด

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