Test Action Creator และ Reducer ด้วยการทำ Snapshot Testing

วันนี้จะแชร์อีกวิธีหนึ่งในการทดสอบ action creator และ reducer นั่นก็คือการใช้ snapshot testing ด้วย Jest ครับผม เรามาเริ่มดูกันที่ action creator กันก่อนเลย

Action creator — ตรงตามชื่อเลยครับ คือ ฟังก์ชันที่ใช้ในการสร้าง action

เราจะเริ่มกันที่ action creator สำหรับใช้สร้าง todo action ตามด้านล่างนี้นะครับ

action creator สำหรับสร้าง action

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

ชุดทดสอบของ action creator addTodo

เพียงแค่นี้เราก็มั่นใจได้แล้วว่า action creator จะคืนค่า action อย่างถูกต้องเสมอ โดยมี type เป็น 'ADD_TODO' และมี text เป็นค่าที่เราส่งเข้าไปใน action creator นั่นก็คือ 'Write a blog' นั่นเอง

หลังจากนี้ หากมีใครมาแก้โค้ดใน action creator แล้วทำให้คืนค่า action ที่หน้าตาไม่เหมือนเดิม ชุดทดสอบก็จะบอกให้เรารู้ได้ว่า ผลลัพธ์มันไม่เหมือนเดิมแล้วนะ

เหมือนเรากำลังทำ snapshot ของ action อยู่เลยเนอะ

ถ้างั้น เรามาลองใช้ snapshot testing แทนวิธีเดิมดูดีกว่า

ชุดทดสอบของ action creator addTodo แบบใช้ snapshot testing

แค่เปลี่ยนจากการใช้ .toEqual ไปเป็น .toMatchSnapshot เพียงแค่นี้ Jest ก็จะเอา action ที่ได้ไปเก็บเป็น snapshot อยู่ในไฟล์นามสกุล .snap เรามาดูข้างในไฟล์กัน

หน้าตาของไฟล์ snapshot

สำหรับคนที่ใช้ VScode อย่าลืมลง extension นี้นะครับ snapshot-tools

หากมีการแก้ไข action creator แล้วผลลัพธ์ไม่เหมือนกับค่าใน snapshot ก็จะพบ error แบบนี้ครับ

error เมื่อผลลัพธ์ที่ได้ไม่ตรงกับ snapshot

เมื่อรู้ว่ามีจุดที่ผิด เราก็สามารถไปแก้โค้ดให้ถูกได้ หรือถ้าค่าใหม่เป็นค่าที่ถูก ก็สามารถอัพเดต snapshot ได้โดยใช้ jest -u ครับ

และในเมื่อ reducer คือ ฟังก์ชันที่ใช้นิยาม next state เราก็สามารถทำ snapshot ของ next state ได้โดยใช้แนวคิดเดียวกันกับการทำ snapshot ของ action เลยครับ

ชุดทดสอบของ todoReducer แบบใช้ snapshot testing

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