ทดสอบใช้ Jest ทำ Unit Testing เบื้องต้น

เที่ยงคืนสิบห้านาที กับวันที่เรานั่งเหม่อ… มือก่ายหน้าผากคิดแล้วคิดอีกว่า Knowledge Sharing รอบนี้จะแชร์อะไรดีน้า จนสุดท้ายก็นึกอยากลองเล่นอะไรบางอย่าง นั่นก็คือการทำ Unit Testing โดยใช้ JS Testing framework ที่ชื่อว่า “Jest” นั่นเองงง

โดยอิงเนื้อหาการเรียน จากคลิป
https://www.youtube.com/watch?v=qayUld_ukpY&t=343s

เพื่อไม่ให้เป็นการเสียเวลา เรามาเริ่มอธิบายกันเลยดีกว่าค่ะว่าเจ้าโลโก้ตัว J ที่เหมือนถุงเท้าตัวตลกนี้คืออะไร อะแฮ่มๆ ฮัลโหล ฮัลโหล Jest Test 1234…

Jest คืออะไร เค้าเป็นใครมาจากไหนกันหนอ ?

ติ๊กต่อก ติ๊กต่อก …คำตอบคือ เค้าเป็นเฟรมเวิร์กสำหรับการทดสอบ JavaScript ที่ถูกพัฒนาโดย Facebook รองรับการเขียนเทสทั้ง React, Vue, Angular, Typescript, Node, Babel หรือ JavaScript ทั่วไป

เป็นที่นิยมเนื่องจากความสามารถในการตั้งค่าและใช้งานได้อย่างง่ายดายโดยไม่ต้องมีการกำหนดค่าเพิ่มเติม นอกจากนี้ Jest ยังรองรับการทำ Software Testing ต่างๆ เช่น Unit Test , Integration Test และ End-to-End (E2E) ซึ่งทำให้เหมาะสมกับโปรเจกต์ทุกขนาด

โดยใน Part นี้เราจะโฟกัสกันที่ตัว Unit Testing นะคะ

คุณสมบัติหลักของ Jest :

• การตั้งค่าที่ง่ายดาย : Jest ถูกออกแบบมาให้ใช้งานได้ทันทีโดยไม่ต้องมีการตั้งค่าเพิ่มเติมสำหรับโปรเจกต์ส่วนใหญ่ โดยเฉพาะอย่างยิ่งเมื่อทำงานกับ Create React App (CRA)
• Mocking : Jest มีระบบการ Mock ในตัว ซึ่งทำให้การทดสอบโค้ดที่มีการพึ่งพาภายนอก (เช่น API calls) ทำได้ง่าย
• Snapshot Testing: หนึ่งในฟีเจอร์ที่เด่นของ Jest คือ Snapshot Testing ซึ่งใช้ในการบันทึกและเปรียบเทียบโครงสร้างของ Component กับ Snapshot ที่เคยบันทึกไว้
• การทำงานแบบ Parallel : Jest สามารถรันการทดสอบหลายๆ ครั้งพร้อมกันในเวลาเดียวกัน (Parallel Execution) ซึ่งช่วยลดเวลาในการทดสอบ
• รายงานความครอบคลุมของโค้ด : Jest มาพร้อมกับความสามารถในการสร้างรายงานความครอบคลุมของโค้ด (Code Coverage) ซึ่งช่วยให้นักพัฒนามองเห็นได้ชัดเจนว่ามีส่วนใดของโค้ดที่ยังไม่ได้รับการทดสอบ

สามารถอธิบาย concept ของ Jest ง่ายๆ ดังนี้

1. Import function เข้าไปเพื่อทดสอบ
2. ป้อน input เข้าไปที่ function นั้นๆ
3. Expected Output หรือกำหนดสิ่งที่เราคาดหวังว่าจะได้
4. ตรวจสอบ Output ว่าตรงตามที่คาดหวังไว้หรือไม่

การติดตั้งและตั้งค่า Jest สำหรับ React.js

สร้าง project react ขึ้นมาผ่าน Terminal ด้วยคำสั่งดังนี้ :

mkdir jest-test
cd jest-test
npm init -y //สร้างไฟล์ json

การติดตั้ง Jest :

npm install jest

จากนั้นจะทำการเปิดโปรเจกต์ใน vscode และสำหรับการทดสอบ จะสร้างไฟล์ขึ้นมา 2 ไฟล์ ได้แก่

1. ไฟล์ calculate.js จะใช้เขียน script ในการ import function ที่ต้องการเทสเข้ามา แล้วทำการ export module ออกไปทดสอบที่ไฟล์ calculate.test.js ซึ่ง ณ ที่นี้จะเป็นการคำนวณ บวก ลบ คูณ หาร ทั่วไป

2. ไฟล์ calculate.test.js จะใช้ในการเขียนเทสเคสที่เราต้องการทดสอบ โดยกำหนดสิ่งที่เราคาดหวัง และผลลัพธ์ที่ควรจะได้ที่ฟังก์ชัน expect โดยค่าที่อยู่ใน .toBe() คือ received value ที่เราต้องการ

Note : expect เป็นฟังก์ชันหลักใน Jest ที่ใช้ในการเขียน assertion หรือการตรวจสอบผลลัพธ์ของการทดสอบ ฟังก์ชันนี้ช่วยให้เราสามารถระบุได้ว่าค่าที่คาดหวัง (expected value) ควรตรงกับค่าที่ได้รับ (received value) หรือไม่

จากนั้นจะเข้าไปที่ไฟล์ package.json เพื่อทำการเปลี่ยนไปใช้ตัว Jest ในการเทสตอนรันคำสั่ง script test

และเมื่อรันคำสั่ง npm test จะแสดงผลการเทสออกมาที่ Terminal ดังนี้

กรณีที่เทสไม่ผ่านบางเคส

กรณีที่เทสผ่านทั้งหมด

• Test suites : ชุดการทดสอบ จะแสดงว่ามีจำนวนชุดข้อมูลทดสอบกี่ชุด และเทสผ่านกี่ชุด
• Tests : เคสทดสอบ จะแสดงเคสที่รันผ่านทั้งหมด และจำนวนทั้งหมดของ test cases
• Snapshots : ใช้สำหรับเปรียบเทียบผลลัพธ์ที่เกิดขึ้นจริงกับ snapshot ที่เก็บไว้ก่อนหน้านี้ เพื่อให้แน่ใจว่าเอาท์พุตของคอมโพเนนต์หรือฟังก์ชันไม่ได้เปลี่ยนแปลงโดยไม่ได้ตั้งใจ
• Time : แสดงเวลาที่ใช้ในการรันทดสอบทั้งหมด อาจจะเป็นเวลาที่แสดงในหน่วยวินาทีหรือมิลลิวินาที ขึ้นอยู่กับระยะเวลาในการทำงานของการทดสอบทั้งหมด

แล้วทำไมเราถึงต้องทำ Software Testing ?

Ref : https://www.youtube.com/watch?v=OzqaNQXb2s4

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

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