ลองทำ Test ด้วย react-testing-library
ลองเปิดใจเขียน Test กันเถอะ ✌🏻
เมื่อไม่นานมานี้ได้ลองใช้ react-testing-library ในการเขียน test ดูเลยอยากมาแชร์การใช้งานโดยมีฟีเจอร์ง่าย ๆ มาให้เทสต์ไปด้วยกัน
react-testing-library คืออะไร 🤔
เป็น libray ที่ใช้ในการทำทดสอบในส่วนของ React Component โดยจะทำงานร่วมกับ Jest โดยเจ้า react-testing-library เนี่ยมันเตรียมพวกฟังก์ชันของ react-dom ต่าง ๆ ไว้ให้เราใช้หมดแล้ว ทำให้เราสามารถทดสอบพวกการ render ต่าง ๆ ได้เลยไม่ว่าจะเป็น label text เพื่อหา input field, การค้นหาข้อความเพื่อค้นหาปุ่ม รวมไปถึงการค้นหา element ด้วยการใช้ data-testid ก็สามารถทำได้
สิ่งที่จะทำ 👀
จะทดสอบส่วนการแสดงผลของการกรอกรหัสผ่าน ซึ่งเราจะทำการทดสอบการ render ว่า render ตรงตามเงื่อนไขที่เราต้องการหรือไม่
Requirement 💬
ต้องการทดลองการกรอกรหัสผ่าน โดยมีเงื่อนไข คือ
- เมื่อยังไม่มีการกรอกอะไรเลย ให้รายการเงื่อนไขด้านล่างเป็นสี
เทา - เมื่อเริ่มมีการกรอก ให้เริ่มตรวจสอบว่าตรงกับ Pattern หรือเปล่า ดังนี้
🍭มี 8-16 ตัวอักษร
🍭มีตัวพิมพ์ใหญ่อย่างน้อย 1 ตัว
🍭มีเลขอย่างน้อย 1 ตัว
🍭ห้ามมีช่องว่าง- เมื่อตรวจสอบแล้วตรงกับ Pattern ให้ตัวหนังสือเปลี่ยนเป็นสี
เขียว - เมื่อตรวจสอบแล้วผิด Pattern ให้ตัวหนังสือเปลี่ยนเป็นสี
แดง - เมื่อพิมพ์แล้วลบออกทั้งหมดทำให้ช่อง Input ว่างเปล่าให้แสดงข้อความว่า
This field is required.และเปลี่ยนสีของเงื่อนไขด้านล่างเป็นสี default คือสีเทา
Tools ที่ใช้ 🔧
- สร้าง Project ด้วยการใช้
create-react-app - ติดตั้ง react testing library
npm install --save-dev @testing-library/dom @testing-library/reactลงมือทำ 👩🏻💻
App.js
App.test.js
ขอหยิบมาอธิบายสัก 1 Case 🧏🏻♀️
สำหรับ Case นี้จะทดสอบว่า เมื่อกรอกรหัสผ่านที่ Input Field ด้วย data แล้ว
จะไปค้นหาข้อความ “8–16 Characters.” ใน App Conponent
แล้วตรวจสอบว่าข้อความนั้นน่ะ มี style เป็นสีแดงหรือไม่
มาลอง Run Test กัน🕵🏻♂️
ด้วยคำสั่ง
npm run testจะได้ผลลัพธ์ออกมาแบบนี้
Source Code 💻
ดู source code เต็มได้ที่ 👇🏻
Conclusion
สำหรับคนที่เริ่มเขียนเทสต์แบบเรา ตอนแรกที่เราเริ่มลองทำยอมรับว่ายากมากเหมือนกันที่จะเริ่มต้น เพราะในหัวจะมีแต่คำว่า
ถ้าไม่มีเทสต์เนี่ยคงเสร็จไปนานละ
แต่อย่าลืมว่าถ้าเราไม่เขียนเทสต์ เราจะไม่รู้เลยว่า เมื่อนาน ๆ ไป เรามีการแก้ไข Code ของเรานั้นมันจะไปกระทบส่วนอื่นหรือเปล่า ซึ่งการเขียนเทสต์นี่แหละที่จะเข้ามาช่วยเตือนและบอกเราให้รู้ว่าการทำงานของ Code เรายังถูกต้องอยู่นะหลังจากแก้บางอย่างแล้ว
Reference 📚
