Snapshot testing ใน React ด้วย Jest
เมื่อไม่นานมานี้ได้มีโอกาสลองใช้ Jest ในการเขียนเทส React แล้วเห็นว่ามีฟีจเจอร์ Snapshot testing คิดว่าน่าสนใจมาก วันนี้จะมาแชร์จากที่ลองใช้มาครับ
ปกติเขียน React เราเทส UI กันอย่างไร ?
ปกติแล้วเราจะเทสได้อย่างไรว่า UI ของ component เนี่ยมันถูกต้องตามที่เราตั้งใจไว้ ยกตัวอย่างโค้ดนี้ครับ
<button id="login" className="login btn btn-primary">Login</button>
คำถามคือเราควรเทสอะไรบ้าง
เทสว่ามี button ไหม ?
เทสว่ามี id ชื่อ login ไหม ?
เทสว่ามี className ชื่อ login btn btn-primary ไหม ?
เทสว่ามี button text ว่า Login ไหม ?
แอบเยอะเหมือนกันนะเนี่ย หรือว่าจะเทสแค่ id ดีล่ะ ? แล้วถ้าเขาแก้ className หรือแก้ button text จะกระทบไหม ? แต่ถ้าเขียนเทสหมดนี่เหนื่อยเลยนะ หรือไม่เขียนเทสเลยดีมั้ย ? (ตีมือแตก!!)
ดังนั้น ทีวีไดเร็คขอเสนอ Jest Snapshot Testing ผ่าม!!!
Snapshot Testing คืออะไร ?
ให้นึกถึงการแคปเจอร์ UI เอาไว้เป็นตัวเปรียบเทียบครับ วันนึงที่มีคนแก้โค้ด เราก็จะเอาผลลัพธ์ไปเทียบกับ UI ที่เคยเก็บเอาไว้ว่ามันเปลี่ยนหรือเปล่า ทำให้เรารู้ได้ว่าในการแก้โค้ดแต่ละครั้ง มันมีผลกระทบต่อ UI ไหม
ใน Jest เนี่ยมีฟีจเจอร์นี้มาให้ สำหรับการ snapshot UI เนี่ย จะเก็บเป็น text นะครับ ไม่ได้เก็บเป็นรูปภาพแต่อย่างใด
ใช้งาน Snapshot Testing กัน
สมมติว่าเราจะเทส Component App กันนะครับ จะเขียนโค้ดแบบนี้
สังเกตว่าจะมีสองเทสเคสนะครับ ดังนี้
- shallow snapshot — จะไม่ render child component
- full snapshot — จะ render child component ทั้งหมดเลย
ผลลัพธ์จากการรันเทส
เมื่อลองรันเทสดู จะเห็นว่ามี snapshot 2 อันถูกสร้างขึ้นมาครับ โดยจะถูกเก็บเป็นไฟล์อยู่ใน level เดียวกันกับไฟล์เทสครับ จะเป็นไฟล์ .snap อยู่ในโฟลเดอร์ __snapshots__ ครับ
ซึ่งด้านในก็จะเก็บเป็น text ตามเทสเคสที่เราได้เขียนไว้ครับ ถ้าเราลองแก้โค้ดใน component ดู แล้วลองรันเทสอีกรอบ ก็จะมีบอกว่า snapshot ถูกเปลี่ยนตรงไหนบ้าง โดยถ้าเราอยากอัพเดต snapshot ก็แค่กด u ก็จะอัพเดตเลย หรือถ้าเราไม่ได้ตั้งใจให้มีผลต่อ UI ก็ไปแก้โค้ดจนกว่าเทสจะผ่านครับ
ความคิดเห็นจากการใช้งาน
ผมชอบ snapshot testing มากๆครับ เพราะมันสามารถเทส UI ทั้งคอมโพนเนนได้เลยโดยการเขียนโค้ดไม่กี่บรรทัด ต่างจากเดิมที่เราต้อง assert หลายจุดเพื่อหวังจะให้มันครอบคลุม UI ทั้งหมด ซึ่งมันก็ไม่ค่อยครอบคลุมเท่าไหร่ ซึ่งใช้ snapshot testing ครอบคลุมและเร็วกว่ามากๆ
แต่อย่างไรก็ตาม snapshot testing ก็เป็นแค่อีกวิธีหนึ่งที่จะทำให้เราเทสได้ครอบคลุมทุกจุดของ UI จริงๆ ยังไงแล้วการเทส UI ส่วนอื่นๆ เช่น การเทส UI ในจุดสำคัญๆ หรือ การเทสว่า render props หรือ state ถูกต้องหรือไม่ พวกนี้ก็ต้องทำอยู่เหมือนเดิมนะครับ แต่แค่ทำ snapshot testing เพื่อช่วยให้เรามั่นใจมากขึ้น
สุดท้ายสามารถเข้าไปดูโค้ดได้ที่ github ด้านล่างนี้เลยครับ หวังว่าจะเป็นประโยชน์ต่อหลายๆคนนะครับ ขอให้มีความสุขกับการเขียนเทสครับผม เจอกันบทความหน้าครับ
