Cypress 사용기 - 2

cypress로 여러가지 삽질중

• 지난주까지는 cypress를 단순히 화면에서의 유저 행동을 테스트 하는 것으로만 한정 지었지만 이번주 삽질을 통해서 더 좋은 점을 알게되었다
• cypress를 정말 파워풀 하게 사용할 수 있는 방법은 바로 response를 stub 하는 것!
• 즉 api의 response를 내가 만들어 줄 수 있다

백엔드와 프론트앤드

• 프론트엔드 프레임워크의 등장 때문인지 요새는 백엔드 따로, 프론트엔드 따로 개발을 한다.
• 결국 두 영역은 api 프로토콜을 통해 어떻게 데이터를 주고 받을지 결정해야한다.
• 문제는 보통 프론트엔드가 백엔드로부터 데이터를 받아서 이를 보여줘야하다보니 자연스레 종속성이 생기게 되고 이는 곧 api가 제대로 만들어지기 전까지는 프론트엔드에서는 페이지를 제대로 확인하기 어렵다
• 이를 해결하기 위해선 프론트엔드내에서 예시 데이터를 만들어서 넣어줘야하는데 이를 또 일일히 하는 것도 힘들고, 특히 'api와 통신 후 비즈니스 로직 실행' 을 예시 데이터를 통해서 구현하기는 쉬운일이 아니다.
  (해당 비즈니스 로직에 env환경에 따라서 다른 response를 뱉게 하는 방법은 조금...)

cypress의 route를 사용하자

• 백엔드와 통신하는 api 및 프로토콜이 아래와 같다고 생각해보자
  - https://jsonplaceholder.typicode.com/posts
  • userId, id, title, body 를 받아온다.
• 만약 아직 api가 만들어지지 않았다면?? 이럴대 response stub을 사용하면 된다.

cy.server()
cy.fixture('todo/getTodoAll').then((getTodoAll)=>{
      cy.route({ 
        method: 'GET', 
        url: 'https://jsonplaceholder.typicode.com/posts',
        response:[getTodoAll]
      })
   	})

하나하나 확인해보자

1. cy.server()는 mock 서버를 띄운다. xhr을 캐치하여 우리가 하고싶은 무언가를 하게 해준다

2. cy.fixture()는 내가 필요한 재료들을 불러오는 명령어이다.
- fixtures 폴더를 기본으로 하고 있고 그 아래에서 각 서비스별로 폴더를 생성해서 관리해주면 된다.
- 내가 쓴 명령어의 경우 fixtures/todo/getTodoAll.json 을 불러오는 명령어 이다.
3. cy.route()는 내가 원하는 response를 만들수 있게 해준다.
- cy.route(METHOD, URL, RESPONSE)와 같은 형태로 하여 원하는 api(url)에 원하는 RESPONSE를 맞춰줄 수 있다

그래서 이게 뭐가 좋은데?

• 위와 같은 구조를 만들어 놓게 되면 우리는 api 프로토콜 스펙과 예시 데이터만 있으면 백엔드의 개발 과정과 상관 없이 프론트를 개발 할 수 있다.
• 백엔드 개발자가 특정 api와 프로토콜, 예시데이터를 주면 우리는 그걸 fixture에 넣어놓고 cy.route를 이용해서 response로 계속 받아오면 된다.
• 과거 내가 백엔드를 개발하고 프론트 개발자와 소통하기 위해서 구글 스프레드시트에 일일히 입력하곤 했는데 이제는 그럴 필요조차 없다.
• cypress는 정말 좋은 테스트 툴이자 프론트 개발할때 필히 같이 갖고 가야하는 프레임웍이라 생각한다.