Vue Academy · บทเรียน

รู้จักเฟรมเวิร์กการทดสอบ

สำรวจภาพรวมและเครื่องมือสำหรับการทดสอบ Vue

รู้จักเฟรมเวิร์กการทดสอบ เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

เหตุใดจึงต้องทดสอบ

การทดสอบอัตโนมัติช่วยตรวจจับข้อผิดพลาดก่อนที่ผู้ใช้จะพบ บันทึกพฤติกรรมที่โค้ดควรมี และช่วยให้คุณปรับโครงสร้างโค้ดได้อย่างมั่นใจ เมื่อแอปเติบโตขึ้น การทดสอบจะมีความสำคัญต่อการรักษาคุณภาพโดยไม่ต้องตรวจสอบด้วยตนเอง

การทดสอบสามประเภท

การทดสอบมีสามระดับหลัก ได้แก่ การทดสอบหน่วยเพื่อตรวจสอบส่วนเล็ก ๆ แบบแยกอิสระ การทดสอบการผสานรวมเพื่อตรวจสอบว่าส่วนต่าง ๆ ทำงานร่วมกัน และการทดสอบตั้งแต่ต้นจนจบเพื่อควบคุมแอปทั้งระบบเหมือนผู้ใช้จริง

การทดสอบหน่วย

การทดสอบหน่วยจะตรวจสอบฟังก์ชันหรือคอมโพเนนต์เดียวแบบแยกอิสระ โดยจำลองการพึ่งพา การทดสอบประเภทนี้ทำงานรวดเร็วและระบุได้อย่างชัดเจนว่าส่วนใดเสีย การทดสอบส่วนใหญ่ของคุณควรเป็นการทดสอบหน่วย

function add(a, b) {
  return a + b
}

test("add sums two numbers", () => {
  expect(add(2, 3)).toBe(5)
})

การทดสอบการผสานรวม

การทดสอบการผสานรวมตรวจสอบว่าหน่วยหลายหน่วยทำงานร่วมกันได้อย่างถูกต้อง เช่น คอมโพเนนต์กับแหล่งเก็บสถานะ หรือแบบฟอร์มที่เรียกตัวห่อหุ้มส่วนเชื่อมต่อโปรแกรม การทดสอบประเภทนี้ตรวจจับปัญหาการเชื่อมต่อที่การทดสอบหน่วยเพียงอย่างเดียวมองไม่เห็น

การทดสอบตั้งแต่ต้นจนจบ

การทดสอบตั้งแต่ต้นจนจบจะเปิดเบราว์เซอร์จริงและคลิกผ่านแอปของคุณเหมือนที่ผู้ใช้ทำทุกประการ การทดสอบประเภทนี้สมจริงที่สุด แต่ก็ช้าที่สุดและเปราะบางที่สุดด้วย ดังนั้นคุณจึงควรเขียนการทดสอบประเภทนี้ให้น้อยกว่าแบบอื่น

พีระมิดการทดสอบ

พีระมิดการทดสอบเสนอให้มีการทดสอบหน่วยที่รวดเร็วจำนวนมากอยู่ฐานล่าง มีการทดสอบการผสานรวมจำนวนน้อยลงอยู่ตรงกลาง และมีการทดสอบตั้งแต่ต้นจนจบจำนวนเล็กน้อยอยู่ด้านบน วิธีนี้สร้างสมดุลระหว่างความมั่นใจกับความรวดเร็ว

Vitest

Vitest คือเครื่องมือเรียกใช้การทดสอบสมัยใหม่ที่รวดเร็ว ซึ่งสร้างมาสำหรับโครงการที่ใช้ Vite มีส่วนเชื่อมต่อโปรแกรมที่เข้ากันได้กับ Jest และทำงานร่วมกับแอป Vue 3 ที่สร้างด้วย Vite ได้อย่างราบรื่น

npm install -D vitest

Jest

Jest คือเครื่องมือเรียกใช้การทดสอบที่มีมานานและใช้กันอย่างแพร่หลายในระบบนิเวศ JavaScript โดย Vitest เลียนแบบส่วนเชื่อมต่อโปรแกรมของ Jest (describe, test, expect) ดังนั้นความรู้จึงนำไปใช้ร่วมกันได้

describe("math", () => {
  test("adds", () => {
    expect(1 + 1).toBe(2)
  })
})

Vue Test Utils

Vue Test Utils คือไลบรารีอย่างเป็นทางการสำหรับการทดสอบหน่วยของคอมโพเนนต์ Vue ไลบรารีนี้จะเมาต์คอมโพเนนต์ในสภาพแวดล้อมการทดสอบ เพื่อให้คุณโต้ตอบกับคอมโพเนนต์และตรวจสอบผลลัพธ์ได้

npm install -D @vue/test-utils

Cypress และ Playwright

สำหรับการทดสอบตั้งแต่ต้นจนจบ Cypress และ Playwright เป็นตัวเลือกยอดนิยม เครื่องมือเหล่านี้ควบคุมเบราว์เซอร์จริง ทำให้คุณเขียนสคริปต์สำหรับการคลิก การพิมพ์ และการนำทาง แล้วตรวจสอบสิ่งที่ผู้ใช้มองเห็นได้

การเลือกชุดเครื่องมือ

การตั้งค่า Vue 3 โดยทั่วไปใช้ Vitest ร่วมกับ Vue Test Utils สำหรับการทดสอบหน่วยและคอมโพเนนต์ และใช้ Cypress หรือ Playwright สำหรับการทดสอบตั้งแต่ต้นจนจบ ชุดนี้ครอบคลุมพีระมิดทั้งหมดด้วยเครื่องมือสมัยใหม่ที่ได้รับการสนับสนุนอย่างดี

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับเฟรมเวิร์กการทดสอบ

สรุปทบทวน

การทดสอบมีสามระดับ ได้แก่ การทดสอบหน่วย การทดสอบการผสานรวม และการทดสอบตั้งแต่ต้นจนจบ โดยจัดสมดุลด้วยพีระมิดการทดสอบ (การทดสอบหน่วยจำนวนมากและการทดสอบตั้งแต่ต้นจนจบจำนวนน้อย) ชุดเครื่องมือ Vue สมัยใหม่ใช้ Vitest หรือ Jest ร่วมกับ Vue Test Utils สำหรับการทดสอบหน่วย และใช้ Cypress หรือ Playwright สำหรับการทดสอบตั้งแต่ต้นจนจบ ถัดไป คุณจะเขียนการทดสอบหน่วยจริงด้วย Vue Test Utils

คำถามที่พบบ่อย

บทเรียน “รู้จักเฟรมเวิร์กการทดสอบ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “รู้จักเฟรมเวิร์กการทดสอบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “รู้จักเฟรมเวิร์กการทดสอบ”

สำรวจภาพรวมและเครื่องมือสำหรับการทดสอบ Vue คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “รู้จักเฟรมเวิร์กการทดสอบ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Vue Academy