[Cypress] 테스트코드 작성시 유의사항

- Cypress가 직접적으로 함수가 호출되거나 컴포넌트 내부의 값을 인지하는 것은 어려울까 ?

: Cypress로 직접적으로 함수 호출을 감지하는 것은 기본적으로 어렵다. Cypress는 웹 애플리케이션의 동작을 테스트하는 데 주로 사용되며, 테스트 코드는 일반적으로 사용자의 행동 및 상호작용을 시뮬레이트하고 해당 동작에 대한 결과를 검증합니다.  함수가 호출됨으로써 발생하는 결과를 통해 간접적으로 확인할 수 있습니다.

 

대신, 함수가 호출되었음을 간접적으로 확인할 수 있습니다. 예를 들어, 함수가 호출될 때 해당 함수가 변경하는 상태나 DOM 요소의 변화를 검증할 수 있습니다. 함수가 호출되었을 때 상태가 변경되거나, 특정 DOM 요소가 생성되거나 변경되는지를 통해 함수 호출을 확인할 수 있습니다.

 

이를 위해 다음과 같은 접근 방식을 사용할 수 있습니다:

1. 함수 호출로 인한 상태 변경을 확인합니다. 예를 들어, 함수가 호출될 때 상태 값을 변경하고, 해당 상태 값을 확인하여 함수 호출을 확인할 수 있습니다.
2. 함수가 호출될 때 DOM 요소를 생성하거나 변경하고, 해당 DOM 요소의 존재 여부나 속성 등을 확인합니다.

describe('Navbar Button Click Tests', () => {
  it('Clicking on search button should display search input', () => {
    cy.visit('/your-page'); // 페이지 방문
    cy.get('button').contains('Search').click(); // 검색 버튼 클릭
    cy.get('.search-wrap input').should('exist'); // 검색 창이 나타나는지 확인
  });
});

- 이렇게 검색 버튼을 클릭한 후에 검색 창이 나타나는지를 확인하여, onSearchButtonClick 함수가 호출되어서 제대로 동작하는지를 확인할 수 있습니다. 함수가 호출되는 것을 직접적으로 확인하는 것은 어렵지만, 함수의 동작 결과를 통해 해당 함수가 호출되었음을 유추할 수 있습니다.

 

- React 컴포넌트에서 입력 값이 변경될 때 상태를 업데이트하는 예시

describe('Input Value Change Tests', () => {
  it('Should update input value and display it correctly', () => {
    // 페이지 방문
    cy.visit('/your-page');

    // 입력 요소를 찾고, "hello"를 입력합니다.
    cy.get('input[type="text"]').type('hello');

    // 입력 값이 변경되었는지 확인합니다.
    cy.get('input[type="text"]').should('have.value', 'hello');

    // 다른 입력 값을 시뮬레이트해봅니다. 예: "world"
    cy.get('input[type="text"]').clear().type('world');

    // 변경된 입력 값이 정확히 표시되는지 확인합니다.
    cy.get('input[type="text"]').should('have.value', 'world');
  });
});

페이지를 방문하고, 입력 요소를 찾은 후에 .type() 명령을 사용하여 입력 값을 변경합니다. 그런 다음 .should() 명령을 사용하여 변경된 입력 값이 예상대로 표시되는지 확인합니다. 이를 통해 입력 값의 변경이 상태에 반영되고, 화면에 올바르게 표시되는지를 확인할 수 있습니다.