프로젝트에 Cypress 도입해보기 ⏤ CRA, 타입스크립트

 

vanillaJavascript를 이용해서 이메일와 비밀번호를 검증할 일이 있었는데, 매번 테스트케이스들을 치고 시도해보는 일이 귀찮게 느껴졌다. 그래서 해왔던 프로젝트에 Cypress를 도입해보고 싶어서 공부한다. (사실 예제에서 적용시키는 프로젝트는 개인 레주메라 cypress가 필요없지만 연습용으로 써봤다.) 🥹 다른 것보다 Cypress 공식문서를 보는 것이 좋았다. 리액트에 도입할 것이기 때문에 Cypress quickStart- React를 보고 설치해주었다.

/ 적용한 프로젝의 개발 환경

- CRA

- Typescript

Cypress 설치 및 초기 설정

yarn add cypress -D

- cypress open 하는 명령어

npx cypress open

이렇게 매번 치는 것이 귀찮아서 package.json 파일의 script 부분에 text: cypress open 문구를 추가해주었다. 이렇게 하게되면 간단하게 yarn test 명령어만으로도 cypress가 실행되어 편한 것 같다.

- cypress.config.ts

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack',
    },
  },
})

(Next.js 와 vite를 설치한 리액트 환경에서는 차이가 있기 때문에 자세한 설정 방법은 공식 문서를 확인하는 것이 좋다.)

baseUrl 설정

Cypress를 이용하기 전에 baseUrl을 설정해주면 e2e 테스트 코드를 작성하며 url 에 관련된 부분을 shortcut으로 이용할 수 있다.

- cypress.config.ts

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3003/',
  },
})

위에서 설정해주었던 cypress.config.ts 파일에 내가 설정해둔 baseUrl을 적어준다. (이전에 프로젝트 로컬에서 3000포트 대신 3003 포트를 이용하게끔 설정해주었었다. )

Cypress 이용하기

많은 블로그들에서 cy.exec() 을 사용해서 cypress 서버를 구동하는 것을 보았는데, 공식 문서에서 안티패턴으로 나와있었다. 그래서 cypress를 실행하기면 서버를 start 를 해두고 cypress를 구동시켜주었다.

- cypress/e2e/text.cy.ts

describe("template spec", () => {
  it("visit", () => {
    cy.visit("/");
  });
});

visit을 이용하여 메인 페이지에 접속이 잘되는지 확인해본다.

visit에 관련된 명령어가 잘 수행되는 것을 확인 할 수 있다.

Cypress에서 컴포넌트 Element 잡는법

className, id 를 통해 엘리먼트를 잡는 방법도 있지만 추천하지 않는다.

cypress 독스에서도 위와 같은 표기 방법을 추천한다.

        <button
          onClick={onMinusBtnClick}
          data-cy="minus"
        >
          -
        </button>

버튼 엘리먼트에 data-cy 값으로 minus를 설정해주었다.

그리고, 실제 이 element가 잘잡히는지 확인해볼 필요가 있다.

- test.cy.ts

describe("test", () => {
  beforeEach(() => {
    cy.visit("/");
  });

  it("minus", () => {
    cy.get("[data-cy=minus]");
  });
});

cy.get 통해 찾아보기로 했다.

마이너스 버튼 쪽에 focus 된 것을 확인할 수 있다 ! 요소가 잘 잡힌 것을 확인했다.

컴포넌트 테스트에서는 beforeEach로 링크 이동이 필요없이 cy.mount 를 통해 컴포넌트를 마운트 시켜주고 테스트를 하면된다

배포시 data-cy 혹은 data-id 가 거슬린다면 ? babel을 통해 배포시에 제거가 가능하다. 상세 세팅은 링크를 첨부하겠습니다.

Cypress 테스트 코드 작성에 피로함

예제와 같은 경우에는 내 레주메이기 때문에 여러 개의 테스트코드가 필요한 것이 아니었다 1개도 짜기에 녹록한 시간이 걸리는 것이 아닌데, 여러개면 더 오랜 시간이 걸릴 것 같았다. 그래서 Cypress Studio를 도입해보고자 했다. Cypress Studio는 사용자의 마우스, 키보드 입력을 기록하면서 자동적으로 테스트 코드를 작성해준다. (click,type,uncheck,select 지원)

Cypress Studio 적용 방법

{
  e2e: {
    experimentalStudio: true
  }
}

cypress.config.ts 파일에 이것만 추가해주면 된다. 설정 방법도 너무 간단하고 편리하다

실제 실행

클릭하는대로 명령어가 알아서 작성되는 것을 확인할 수 있다.

매번 클릭하거나 입력하는 것의 data-cy 를 찾지 않고도 이용할 수 있다는게 가장 큰 장점인 것 같다.

그럼에도 아무래도 사용자의 이벤트를 생각보다 많이 지원해주지 않다보니 코드로 테스트코드를 손봐야하는 경우가 생긴다. ⏤ Cypress Studio는 공식 문서에도 명시가 되어있듯이 실험적인 기능이다 ! 기능이 추가적으로 생긴다면 더 유용하게 이용될 수 있지 않을까하는 생각이 들었다. ⏤그래도 단순한 click이나 입력 이벤트만을 위한 테스트 코드 작성시 굉장히 편리하게 사용할 수 있다는 생각이 ~,, 들었다 !

---

Cypress Elements 선택하기 (data-cy 사용과 제거)