𝗧𝗲𝘀𝘁𝗶𝗻𝗴 𝗮𝗻𝗱 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽𝘀
เลิกเดาสุ่มว่าโค้ดของคุณทำงานได้หรือไม่ ใช้การทดสอบเพื่อสร้างความมั่นใจ
นักพัฒนาส่วนใหญ่มักข้ามการทดสอบเพราะรู้สึกว่าการตั้งค่ามันยุ่งยากเกินไป พวกเขามองว่าการทดสอบเป็นภาระแทนที่จะเป็นตาข่ายนิรภัย
คุณไม่ได้เขียนเทสต์เพื่อให้คอมพิวเตอร์อ่าน แต่คุณเขียนเทสต์เพื่อตัวคุณเองในอนาคต เมื่อคุณต้องแก้ไขฟังก์ชันตอนตี 2 เทสต์จะบอกคุณทันทีว่าคุณทำอะไรพังไปหรือเปล่า
ให้คิดว่าการทดสอบเหมือนรูปพีระมิด:
• Unit Tests: ทดสอบหนึ่งฟังก์ชันหรือหนึ่งคอมโพเนนต์ ซึ่งทำงานได้รวดเร็วและมีจำนวนมาก • Integration Tests: ทดสอบว่าส่วนประกอบต่างๆ ทำงานร่วมกันอย่างไร ซึ่งจะช่วยสร้างความมั่นใจให้คุณได้สูง • E2E Tests: ทดสอบแอปพลิเคชันทั้งระบบบนเบราว์เซอร์ ควรใช้เฉพาะกับเส้นทางที่สำคัญ (critical paths) เช่น การเข้าสู่ระบบหรือการชำระเงิน
กฎเหล็กของ React Testing Library: ทดสอบในสิ่งที่ผู้ใช้มองเห็น
อย่าทดสอบ state variables อย่าทดสอบ CSS classes อย่าทดสอบ internal logic ให้ทดสอบปุ่ม ข้อความ และช่องกรอกข้อมูล (inputs) หากผู้ใช้มองไม่เห็นสิ่งนั้น ก็ไม่ต้องทดสอบมัน
ทำตามรูปแบบ Arrange, Act, Assert:
- Arrange: เรนเดอร์คอมโพเนนต์ของคุณ
- Act: คลิกปุ่มหรือพิมพ์ลงในช่องกรอกข้อมูล
- Assert: ตรวจสอบว่าข้อความที่ถูกต้องปรากฏบนหน้าจอหรือไม่
สำหรับโค้ดแบบ async เช่น การเรียก API ให้ใช้ waitFor ซึ่งจะช่วยให้เทสต์ของคุณรอจนกว่าข้อมูลจะโหลดเสร็จก่อนที่จะตรวจสอบผลลัพธ์
หากแอปของคุณพังในขั้นตอน production ให้ใช้ Error Boundaries สิ่งนี้จะช่วยป้องกันไม่ให้คอมโพเนนต์ที่เสียเพียงตัวเดียวทำให้หน้าเว็บทั้งหน้ากลายเป็นหน้าจอสีขาว และช่วยแสดงหน้าสำรอง (fallback) ที่เหมาะสมให้กับผู้ใช้งาน
รายการตรวจสอบการดีบั๊กแบบด่วน:
- ตรวจสอบ error ใน browser console
- ตรวจสอบ Network tab เพื่อดู API responses
- ใช้ React DevTools เพื่อตรวจสอบ props และ state
- ตรวจสอบว่าคุณกำลังแก้ไข state โดยตรง (mutating state) หรือไม่
- ตรวจสอบ dependency arrays ของ
useEffect
มุ่งเน้นไปที่การทดสอบสิ่งที่สำคัญ คุณไม่จำเป็นต้องมี coverage ถึง 100% แต่คุณต้องครอบคลุมฟีเจอร์ที่หากทำงานผิดพลาดแล้วจะส่งผลเสียร้ายแรง
Source: https://dev.to/kushang_tailor/testing-debugging-react-apps-write-code-you-can-actually-trust-5334