ทดสอบใช้ 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 ง่ายๆ ดังนี้
- Import function เข้าไปเพื่อทดสอบ
- ป้อน input เข้าไปที่ function นั้นๆ
- Expected Output หรือกำหนดสิ่งที่เราคาดหวังว่าจะได้
- ตรวจสอบ Output ว่าตรงตามที่คาดหวังไว้หรือไม่
การติดตั้งและตั้งค่า Jest สำหรับ React.js
สร้าง project react ขึ้นมาผ่าน Terminal ด้วยคำสั่งดังนี้ :
mkdir jest-test
cd jest-test
npm init -y //สร้างไฟล์ json
การติดตั้ง Jest :
npm install jest
จากนั้นจะทำการเปิดโปรเจกต์ใน vscode และสำหรับการทดสอบ จะสร้างไฟล์ขึ้นมา 2 ไฟล์ ได้แก่
- ไฟล์ 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 ตัวนี้นะคะ 😻