มาลอง Data Driven Testing ใน Jest กันหน่อย

aofleejay
aofleejay
Jun 21 · 2 min read

ถ้าชุดทดสอบทำงานแบบเดิม ต่างกันแค่ข้อมูลทดสอบ จะทำอย่างไรดี ?


บวกเลขสองหลัก

เริ่มกันที่ตัวอย่างสุดคลาสสิค สมมติว่าเรามีฟังก์ชันบวกเลขสองหลัก เราจะทดสอบมันยังไงดีนะ ?

หลายคนคงมีคำตอบในใจแล้วใช่ไหมครับ อย่างผมก็คิดว่าโยนเลขสองตัวเข้าไปในฟังก์ชัน แล้วดูว่าผลลัพธ์ที่ได้ตรงตามที่คิดไว้ไหม

สมมติว่าผมมีข้อมูลทดสอบอยู่สามชุด ดังนี้

+-----+-----+----------+
| A | B | Expected |
+-----+-----+----------+
| 1 | 1 | 2 |
| -1 | 1 | 0 |
| -1 | -1 | -2 |
+-----+-----+----------+

ถ้าคิดง่าย ๆ เราก็สร้างชุดทดสอบมาสามชุด แล้วก็แยกทดสอบกันไป สุดท้ายก็จะได้โค้ดเหมือนด้านล่างนี้

ทดสอบฟังก์ชันบวกเลขสองหลัก เขียนแบบแยกสามชุดทดสอบ

เขียนแบบนี้ก็ไม่ได้ผิดแปลกอะไรนะครับ แต่สำหรับผมคงขัดใจนิดหน่อยตรงที่ชุดทดสอบมันถูกเขียนซ้ำ ๆ และยิ่งข้อมูลทดสอบมีเยอะเท่าไหร่ โค้ดซ้ำก็จะเยอะตามไปด้วยเท่านั้น

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


ลดการเชียนชุดทดสอบซ้ำ ๆ ด้วย `test.each`

ใน Jest เราสามารถเตรียมข้อมูลทดสอบเอาไว้ในรูปของอาเรย์สองมิติหรือตาราง แล้วใช้ it.each หรือ test.each เพื่อนำข้อมูลทดสอบไปใช้ โดยเขียนไว้ในการทดสอบเดียวได้ แบบนี้ครับ

ใช้ test.each แบบอาเรย์สองมิติ

เราเก็บชุดข้อมูลทดสอบไว้เป็นอาเรย์สองมิติ ดูไปดูมาก็คล้ายตารางใช่ไหมครับ แต่ละแถวคือข้อมูลทดสอบในแต่ละครั้ง ส่วนที่ดูเหมือนคอลัมน์ก็เป็นพารามิเตอร์ที่จะถูกส่งไปยังเทสฟังก์ชันครับ จากตัวอย่างก็จะส่งไปเป็น a, b, expected ตามลำดับ

เราสามารถนำค่าในข้อมูลทดสอบมาแสดงเป็นชื่อเทสเคสได้ผ่าน syntax ของ printf ด้วยนะ จากตัวอย่างก็ใส่เป็น %d เลย

หรือถ้าผู้อ่านแอบคิดในใจว่า ทำขนาดนี้ไม่เขียนตารางไปเลยล่ะ งั้นได้เลย จัดไป

ใช้ test.each แบบตาราง เขียนโค้ดต่างกับแบบแรกนิดหน่อย

สำหรับใครที่กลัวว่าจะต้องมานั่งจัดตารางให้สวยก็ไม่ต้องกังวลไปนะครับ เราสามารถใช้ Prettier จัดตารางให้เป็นระเบียบได้เลย

จัดตารางให้สวยด้วย Prettier (จริงๆแล้ว Format on save ก็ได้นะ)

สุดท้ายทั้งสามวิธีให้ผลลัพธ์แบบเดียวกัน แบบนี้ครับ

ผลลัพธ์จากการทดสอบทั้งสามแบบ

สรุป

สำหรับผมคิดว่าวิธีนี้น่าสนใจพอสมควรเลยครับ คือรู้สึกว่าถ้าเขียนแบบเดิม ๆ เนี่ย ยิ่งข้อมูลทดสอบมันเยอะมาก ๆ แค่นี้ก็ไม่อยากอ่านแล้วครับ เพราะโค้ดมันจะยาวมาก และดูซ้ำ ๆ กันเต็มไปหมด

และที่ชอบอีกอย่างคือการเตรียมชุดทดสอบเป็นตารางนี่แหละ ผมรู้สึกว่ามันเห็นภาพมากนะ คือมองโค้ดผ่าน ๆ แล้วรู้เลยว่าเราทดสอบอะไรอยู่บ้าง แต่อาเรย์สองมิตินี่ดูอ่านยากไปหน่อยแฮะ


จบแล้วครับสำหรับบทความนี้ หากใครอยากอ่านเพิ่มเติมสามารถดูได้ที่ลิ้งก์ด้านล่างนี้เลยครับ สำหรับใครที่ใช้แล้วชอบไม่ชอบยังไงสามารถเข้ามาพูดคุยกันได้นะครับ

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade