จาก 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 ก็ใช้งานได้
ผลการทำงานผ่าน Cypress เป็นดังนี้
ก็น่าจะพอเริ่มต้นได้แล้วนะ
ดูท่าน่าจะสนุกมาก ๆ สำหรับ Cypress Component Testing
Reference Websites
