ลองใช้งาน Component testing ของ Cypress กันหน่อย

จาก Cypress 10 นั้นได้เพิ่ม component testing ใน beta version
ออกมาให้ลองใช้งาน ตอนนี้เป็น 10.1.0 แล้วนะ
ซึ่งสนับสนุนระบบที่พัฒนาตามแนวทางของ Component Driven User Interface
ยกตัวอย่างเช่น React และ Vue เป็นต้น
ดังนั้นมาลองใช้งานกันดู

ก่อนอื่นต้องเข้าใจขอบเขตของ Component testing ก่อน

โดยใน framework อื่น ๆ การทดสอบแบบนี้จะเป็นแบบ non-ui
คือไม่เห็นว่า UI แสดงผลอย่างไร
แต่สามารถทดสอบการทำงานของ component ต่าง ๆ
ว่าทำงานถูกต้อง มีพฤติกรรมการทำงานถูกต้องตามที่กำหนดและคาดหวังหรือไม่
เป็นการตรวจสอบก่อนจะนำ แต่ละ component มาทำงานร่วมกันต่อไป

แต่ใน Cypress นั้นก็เหมือนกัน แต่เพิ่มเติมคือ แสดง UI ของการทดสอบให้เลย
ทำให้ง่าย สะดวกต่อการใช้งานมากขึ้น
แน่นอนว่า การทดสอบจะรวดเร็วขึ้น
รวมทั้งจะไม่จำเป็นต้องสนใจ dependency อื่น ๆ ที่ใช้
เช่นการเรียกใช้งาน external api เป็นต้น

แต่ไม่ได้การันตีว่า ทั้งระบบจะทำงานได้นะ
ดังนั้นจำเป็นต้องมี End-to-End testing ด้วย แต่มีเท่าที่จำเป็น

Component testing นั้เหมาะสมกับใคร ?

ตอบง่าย ๆ คือ นักพัฒนา และ นักออกแบบนี่เอง
ดังนั้น Definition of Done (DoD) ควรมี component testing มาด้วยไหม ?

มาลองใช้งานกันดูหน่อย

ยกตัวอย่างของการสร้างระบบงานด้วย React
โดยจะมี component UserList สำหรับแสดงข้อมูลรายชื่อผู้ใช้งาน
ซึ่ง component นี้ดึงข้อมูลจาก REST APIs มาแสดง

จากนั้นเรามาดูกันว่า จะเขียน Component test อย่างไรด้วย Cypress ++

เริ่มด้วยถ้าเป็น project เดิมที่เคย run ด้วย Cypress version เก่า

จะมีการ migrate ให้ทันที เพราะว่า มีการเปลี่ยนชื่อ folder, file และ config ใหม่นั่นเอง

ต่อมาเลือกว่าจะทำ Component testing beta กัน

ตัว Cypress ทำการ detect ให้เองว่า ใช้ framework และ bundler อะไร
และทำการเพิ่ม config ในไฟล์ cypress.config.js และ cypress/support/component.js, commands.js ให้
เพียงเท่านี้ก็เริ่มเขียน test และ run กันได้แล้ว ง่ายมาก ๆ
โดยไฟล์ต่าง ๆ ของ component test จะอยู่ใน folder cypress/cpmponent

ใน project นั้น ผมใช้ Vite ในการสร้าง
พบว่าเจอ issue นี้ใน cypress :: > Unexpected token '<' error w/ cypress component testing
แก้ไขด้วยการเปลี่ยนชื่อไฟล์ของ component test เป็น .jsx ก็ใช้งานได้

[gist id="c595010e7e6431b8cd21a796a09a5cc1" file="1.jsx"]

ผลการทำงานผ่าน Cypress เป็นดังนี้

ก็น่าจะพอเริ่มต้นได้แล้วนะ
ดูท่าน่าจะสนุกมาก ๆ สำหรับ Cypress Component Testing

Reference Websites

• Testing types in Cypress