Cypress

할머니 댁에 도착! 인사를 드리고, 준의 객체의 소리를 찾아서.. 세션에 참가했다.
세션이 끝나고, 오전에 작업하던 리팩터링 이어하려고 하니...

앗차.. push를 안했다..

데스크탑에서 push를 하지 않고 온 것이다 어흑...

다시 작성하기엔 객체의 구조들과 비동기 처리 로직(콜백 => Promise)등 리팩터링한 코드의 양이 조금 많았기에... 다른 작업을 하기로 했다.

뭘 할까 하다가, 차주의 미션에서 사용하게되는 테스트 도구인 Cypress를 학습하기로 했다.

---

Cypress?

Cypress는 실제 사용자의 활동을 시뮬레이션하며, 소프트웨어가 예상대로 작동하는지 확인하는 E2E Test를 진행 할 때, 유용한 테스트 도구이다.

---

Jest + RTL과의 차이점

1. 테스트 유형

이전까지는 테스팅 도구로 Jest + ReactTestLibrary 조합을 사용해왔다. 이러한 경우, 보통 컴포넌트나 객체의 단위 테스트 및 통합테스트를 진행해왔다.
Cypress와의 E2E 테스트를 주로 진행한다는 점에서 차이점을 보인다.

2. 런타임 환경

Jest는 NodeJS 환경에서 실제 DOM을 에뮬레이션 하기 위해, JSDOM을 사용하여 CLI 내에서 작동한다.

다만, Cypress는 실제 브라우저의 환경에서 작동한다.

3. 실시간

Jest는 yarn test와 같이 명시적으로 테스트를 실행해야 한다면, Cypress의 테스트는 브라우저에서 실시간 & 자동으로 실행된다.
그렇기에 조금 더 빠른 피드백을 제공한다는 점에서 TDD의 철학에 가깝다고 볼 수 있을 것 같다.

4. 편의성 제공

Cypress는 각 테스트에 대한 스냅샷을 제공한다. 또한, 테스트가 실패했을 경유 이를 추적할 수 있는 편의 기능들을 제공한다.

음..! 대략 어떤 친구인지 감은 온다! 제일 좋은 건 직접 코드를 작성해보는 것 😀

---

다음은 우리의 준코치가 제공하는 예제코드이다.

describe('ui-counter', () => {
  beforeEach(() => {
    // 페이지 접속. 띄워진 서버 port를 작성해주세요.
    cy.visit('http://localhost:8080/')
  })
  
  it('+ 버튼 클릭시 1 증가한다.', () => {
    // btn-inc 클래스를 가진 요소를 클릭
    cy.get('.btn-inc').click();
    
    // value 클래스를 가진 요소의 텍스트가 10
    cy.get('.value').should('have.text', '10');
  });

jest의 코드 작성 방식과 거의 유사하다. 메서드만 익히면 금방 사용할 수 있을듯 하다.

선택자

// 클래스가 'plus-button' 인 엘리먼트
cy.get('.plus-button');

// '+' 텍스트를 포함하는 엘리먼트
cy.contains('+');

should

Assersion API: https://docs.cypress.io/guides/references/assertions.html

// 보임
cy.get('.login').should('be.visible');

// 'form-horizontal' 클래스가 있음
cy.get('form').should('have.class', 'form-horizontal');

// value가 'Jane'이 아님
cy.get('input').should('not.have.value', 'Jane');

// 텍스트가 '10'
cy.get('.value').should('have.text', '10');

// disabled 속성이 있음(true)
cy.get('.btn-inc').should('have.attr', 'disabled');

음..! 테스트 코드 몇 번 짜보면서 준이 제공해준 Cypress 예제를 풀어보면 금방 감을 잡을 수 있을 것 같다! 아래의 자료들을 참고하며 TC를 작성해보자!

> Docs
> Cheet sheet