How to test JavaScript?

#test javascript ทำยังไงน้า 🤔

ก่อนจะไปถึงเรื่อง ​”ยังไง” ขอเริ่มที่เรื่อง “ทำไม” ก่อน

มีเหตุผลเยอะแยะเลยที่ทำไมเราควรทดสอบ app ขอยกตัวอย่างมา 2 ข้อ

1. มันช่วยให้พัฒนา app เร็วขึ้น

2. หากมีการเปลี่ยนแปลงโค้ด มันช่วยเพิ่มความมั่นใจว่า app ยังทำงานในแบบที่เราต้องการ

โดยเราจะลองทดสอบโปรแกรมบวกลบเลข งั้นมาเริ่มกันเลย ตัวอย่างโค้ดทั้งหมดสามารถดูได้ที่: github

Step 1

เราจะใช้ node มาทดสอบโปรแกรมกัน ให้รันคำสั่ง node basic-test.js ก็จะพบว่าไม่มี error และนี้แหล่ะคือการทดสอบโปรแกรม เย้ 🎉 ขอขยายความหน่อย Test จะแสดงผลเป็น error หากผลลัพธ์ที่ได้จากโปรแกรม (result) ไม่ตรงกับ กับสิ่งที่เราต้องการ (expected) คำที่ถูกพูดถึงบ่อย ๆ เวลาเขียน test คือ assertion มันคือส่วนนี้ actual !== expected Assertion คือเงื่อนไขที่เราต้องการทดสอบ เพื่อยืนยันว่าโปรแกรมทำงานในแบบที่เราต้องการหรือไม่

ตัวอย่างนี้เป็นการเขียน test แบบง่าย ๆ ลองรัน node 1.js ก็จะพบว่าไม่มี error นะจ๊ะ ลองนึกภาพว่าวันนีงมีการแก้ไข sum function เปลี่ยนจาก + เป็น - แล้วจะรู้ได้ยังไงว่าโปรแกรมยังทำงานในแบบที่เราต้องการหรือเปล่า เราสามารถรัน node 1.js เพื่อทดสอบได้

อะจ๊าก 💥 error แต่เดี๋ยวก่อน นี่เป็นเรื่องดีนะ เพราะหลังจากนี้ถ้ามีการแก้ไขโปรแกรม เราก็สามารถเช็คได้ว่าโปรแกรมยังทำงานในแบบที่เราต้องการอยู่หรือเปล่า

Step 2

ที่จริง node มี assert module

มาให้เราใช้ด้วยล่ะ

เจ๋ง ดูไปดูมามันก็คล้ายกะตัวอย่างก่อนหน้านี้นะ ไหนมาดู output กันหน่อย

ก็โอนะ ว่าแต่เราจะรู้ได้ยังไงว่า error มันเกิดจากส่วนไหนของโปรแกรมอ่ะ 😦 เป็นคำถามที่ดีมากเลยฮะ แต่ขอข้ามคำถามนี้ไปก่อน

Step 3

มาลองเขียน testing framework และ assertion library แบบง่าย ๆ ใช้เองกัน โดยตั้งชื่อว่า expect

เยี่ยมเลย เราสามารถเพิ่ม assertion เองได้ด้วยนะ ตัวอย่างเช่น toMatchRegex, toHaveLength แล้ว output เป็นไงมั่ง

ดูดีเลยทีเดียว

Step 4

ย้อนกลับมาที่เรื่อง แล้วจะรู้ได้อย่างไรว่า error มันเกิดจากส่วนไหนของโปรแกรม เราจะเขียน function test เพื่อแก้ไขปัญหานี้กัน

โค้ดส่วนไหนที่เกี่ยวข้องกัน ก็เอามาไว้ด้วยกัน แล้วตั้งชื่อให้มันซะหน่อย เสร็จแล้วมาดู output กัน

ซู้ดยอด ทีนี้เราก็รู้แล้วว่า error มาจากไหน

Step 5

สุดท้าย เราจะมาสร้าง cli tool สำหรับค้นหาและรัน test แทนเรา เดี๋ยวช้าก่อน โชคดีมากที่มีคนสร้าง tool นี้ไว้แล้ว 🎉 นั่นก็คือ Jest มาลองใช้กันเลย

output ก้หน้าตาประมาณนี้

ว้าว อ่านง่ายขึ้นเยอะเลย

แถมยังบอกเราด้วยว่า error เกิดที่โค้ดบรรทัดไหน เวรี่กู๊ด

ปิดท้าย การ test คือการทดสอบว่าโปรแกรมทำงานในแบบที่เราต้องการมั๊ย ซึ่งถือเป็นเรื่องสำคัญเลยทีเดียว ส่วน tools ที่ใช้ก็มีให้เลือกมากมาย และถ้าอยากเรียนรู้เพิ่มเติม สามารถเข้าไปอ่านจาก links นี้ได้เลย common framework helper functions assertions

ขอบคุณที่สละเวลามาอ่าน หวังว่าจะได้ความรู้ ไม่มากก็น้อย โชคดีคร้าบ

ขอขอบพระคุณ kent c. dodds มาก ๆ สำหรับบทความดี ๆ

แหล่งที่มา: https://kentcdodds.com/blog/but-really-what-is-a-javascript-test