จากที่คุยเรื่อง Component Testing ของ Cypress ใน alpha version
หรือเรียกว่า Cypress Component Testing Library
พบว่า มีความเข้าใจผิดเรื่องของ Component testing นิดหน่อย
เพราะว่า ชื่อดันไปเหมือนกับ Service Component Testing ใน Microservices อีกด้วย
จึงทำการอธิบายไว้นิดหน่อย

ปล. Cypress Component Testing Library สามารถเปลี่ยนแปลงได้อีกมาก

ก่อนอื่น ๆ Component Testing ของ Cypress นั้น

คือการทดสอบแต่ละ component ที่เราต้องการ
ไม่ว่าจะเป็น Component ใน ReactJS, Angular และ VueJS

ซึ่งปกติการทดสอบในแต่ละ component
จะทดสอบผ่าน test framework/library เช่ร Jest หรือ Mocha
รวมทั้งการ render จะใช้ virtual browser แทนคือ JSDom นั่นเอง

แต่ใน Cypress นั้นจะทดสอบบน browser จริง ๆ ไปเลย
ทำให้ง่ายต่อการทดสอบและ debugแสดง
ดังรูป

การทดสอบแบบนี้ เราสามารถเข้าถึง Component ที่ต้องการได้เลย

ไม่จำเป็นต้องเข้า URL ใด ๆ
เพียงแค่ mount Component ที่ต้องการได้เลย
จากภาพ Component ที่สามารถทดสอบได้ด้วย Cypress คือ

  • Main component
  • Component 1
  • Component 2

ส่วนอีกเรื่องคือ Service Component Testing

ซึ่งมีที่มาจาก Microservices Testing
เป็นการทดสอบในแต่ละ service แยกกันไปเลย
แน่นอนว่า มีแนวคิดเดียวกันคือ Isolated component/service testing นั่นเอง
ช่วยทำให้เรามั่นใจมากยิ่งขึ้นว่า
service หนึ่ง ๆ ของเราทำงานได้ตามที่เราคาดหวัง
ด้วยการเข้าตาม URL ที่ต้องการ
รวมทั้งมีการจำลองหรือควบคุมการทำงานของ dependency ที่ใช้งาน
ยกตัวอย่างเช่น External REST API เป็นต้น

ดังนั้นถ้าเรามองว่าระบบงานในฝั่งของ Frontend เป็น service หนึ่งของเรา

แล้วมี dependency ที่ใช้คือ External REST API
เราสามารถทดสอบส่วนของ Frontend แบบ Service Component Testing
ด้วยการใช้งาน Cypress ได้เลยด้วยการใช้ Intercept network request
ที่ออกจาก browser ของ Cypress ได้เลย

เพียงเท่านี้เราสามารถทดสอบการทำงานของระบบงาน
ได้ตามที่เราต้องการ
เพื่อเพิ่มความมั่นใจต่อระบบงานให้มากยิ่งขึ้น

Tags:,,