มาทำ Frontend unit testing กัน (ผ่าน Vitest และ React)

☕️ สนับสนุนช่องเราด้วยการสมัครสมาชิกช่องทางนี้ได้เลย
   / @mikelopster  

ลองไมค์ สัปดาห์นี้ เราจะมาพูดถึงการทำ Unit test ของฝั่ง Frontend กันบ้าง ว่ามันคืออะไร เราสามารถทำ Unit test หรือการทำ Component Testing ฝั่ง Frontend ยังไงได้บ้าง ผ่าน 3 use cases ที่เราได้ทำการหยิบมาเล่าสู่กันฟังกันครับ

โดยหัวข้อนี้เราจะพูดถึง
1. แนะนำการทำ Unit test ฝั่ง Frontend ว่าคืออะไร
2. ประเภทของ Library สำหรับ Testing (แนะนำ Vitest และ React Testing Library)
3. มาทำ Unit test ผ่าน 3 use cases ของ Frontend กัน (Counter - กดปุ่มแสดงข้อมูล, UserList - ดึงข้อมูล, RegisterForm - ส่งข้อมูล)
4. แนะนำเรื่อง Code coverage และคำแนะนำเพิ่มเติมสำหรับการทำ Unit test frontend

หวังว่าผมจะเป็นส่วนหนึ่งที่ทำให้ทุกคนเข้าใจเรื่อง Frontend unit test มากขึ้นนะครับ 😆

หัวข้อ
00:00 แนะนำหัวข้อ
02:23 Frontend unit test คืออะไร ?
04:41 รู้จักกับ Library Testing (Vitest, React Testing Library)
09:33 Use case ทั้ง 3 เคสที่จะหยิบมาทำ Test
10:44 เริ่มต้น project React ผ่าน Vite
12:22 ลง library สำหรับการทำ Unit test
14:01 เคสที่ 1 - Counter Component ส่วน code
15:57 เคสที่ 1 - Counter Component ส่วน unit test
26:55 เคสที่ 2 - UserList Component ส่วน code
30:05 เคสที่ 2 - UserList Component ส่วน unit test
41:33 เคสที่ 3 - RegisterForm Component ส่วน code
47:48 เคสที่ 3 - RegisterForm Component ส่วน unit test
58:32 แนะนำเรื่อง Code coverage
1:00:25 เพิ่มเติมเรื่องการใช้งาน Vitest ผ่าน UI
1:01:23 สรุปทั้งหมด

สามารถอ่าน Blog เพิ่มเติมได้ที่
https://mikelopster.dev/posts/react-u...

ใครมีข้อสงสัยเพิ่มเติม มาพูดคุยแลกเปลี่ยนความรู้กันได้ที่
Facebook page:   / mikelopster.dev   กันได้เลย

แปะพิกัดของที่ผมใช้
https://shope.ee/8A54c8cfkf ของที่ตั้งอยู่ด้านหลัง
https://shope.ee/6fI75UuLEM osmo pocket 3
https://shope.ee/4VDcVixCW9 ไมค์ shure
https://shope.ee/6pbXI6d5xG กล้องวงจรปิด

Enjoy ครับ 😘