👾Component Test With Cypress

Component testing is the way to identify the issues at the module level

Component Test คืออะไร

Testing Pyramid (Automation Testing)

"Component test" หมายถึงการทดสอบส่วนย่อยของซอฟต์แวร์หรือระบบที่เรียกว่า "component" โดยตรง โดยไม่สนใจส่วนอื่น ๆ ของระบบ หรือ dependencies ภายนอก เป้าหมายของ component test คือการตรวจสอบความถูกต้องและประสิทธิภาพของส่วนย่อยที่กำลังถูกทดสอบ โดยอาศัยการทำงานของ component นั้น ๆ เท่านั้น.

หลักการของการเขียน Component Test

หลักการของ component test จะเน้นไปที่การ test แบบ UI Test หรือ ทดสอบพฤติกรรม(behaviour)ของมัน (คล้ายๆ automation test) แต่จะไม่ทดสอบในส่วนของ Logic ใน component ของ Component นั้นๆ เพื่อลดความซับซ้อน และ เวลาในการเขียน

• วัตถุประสงค์: การทดสอบความถูกต้องและประสิทธิภาพของ component แต่ละตัวโดยตรง โดยแยกจากส่วนอื่น ๆ ของแอปพลิเคชัน.

• ขอบเขต: จำกัดเฉพาะ component นั้น ๆ และทำการทดสอบฟังก์ชัน, การแสดงผล, และการทำงานของ component.

Cypress

Cypress เป็นเครื่องมือที่ได้รับความนิยมสำหรับทำ end-to-end testing ในเว็บแอปพลิเคชัน (E2E testing) โดยเฉพาะในสถานการณ์ที่ต้องการทดสอบการทำงานของแอปพลิเคชันจริง ๆ บนเบราว์เซอร์. แต่ Cypress ก็สามารถใช้ทดสอบ Component แบบ isolated หรือแยกต่างหากได้ด้วย.

การใช้ Cypress เพื่อทำ Component test มีประโยชน์ในการทดสอบส่วนย่อยของแอปพลิเคชัน React โดยตรง โดยไม่ต้องทำการทดสอบทั้งระบบหรือการทดสอบ E2E ทั้งหมด.

นี้คือลักษณะการใช้ Cypress สำหรับ Component Test

การจัดการกับ DOM

• Cypress มีความสามารถในการเข้าถึงและจัดการกับ DOM ของ Component อย่างง่าย.

• สามารถใช้คำสั่งเช่น cy.get(), cy.contains(), และ cy.click() เพื่อทำสิ่งต่าง ๆ บน DOM.

Real-Time Reloads

• ในโหมด development, Cypress สามารถทำให้ test สามารถรันและเห็นผลการทดสอบทันทีที่โค้ดถูกแก้ไข.

• ทำให้สามารถดูผลลัพธ์ทันทีที่ทำการแก้ไขและ refactor code.

Snapshot Testing

• Cypress สามารถให้ snapshot testing ที่ช่วยเปรียบเทียบ Component กับ snapshot ที่ถูกบันทึกไว้.

การจำลองและ Stubbing

• Cypress มีฟีเจอร์ที่ช่วยจำลองหรือ stub dependencies เพื่อจำลองการทำงานของภายนอก.

Interactive Mode

• Cypress มีโหมด Interactive ที่ให้คุณทดสอบและเรียกใช้คำสั่งใน context ของเบราว์เซอร์ที่กำลังทำงาน.

ตัวอย่างของ Component Test โดยใช้ Cypress

// cypress/integration/counter_spec.js
describe('Counter Component Test', () => {
  it('increments and decrements the counter', () => {
    cy.visit('http://localhost:3000'); // Replace with the URL of your app
    
    // Initial count
    cy.get('p').should('have.text', 'Count: 0');
    
    // Increment
    cy.contains('Increment').click();
    cy.get('p').should('have.text', 'Count: 1');
    
    // Decrement
    cy.contains('Decrement').click();
    cy.get('p').should('have.text', 'Count: 0');
  });
});