มาทำ 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 ครับ 😘