Cypress를 통한 E2E 테스트

📚 하루만에 Cypress로 작성하는 JS E2E 테스트 코드

이 글은 메이커준-하루만에 Cypress로 작성하는 JS E2E 테스트 코드를 수강 후 작성한 글입니다. 강의와 직접적인 관계가 있는 정보는 최대한 배제하였습니다.
간단한 예제를 통해 어떻게 Cypress를 다루는지, 왜 테스트 코드를 작성해야하는지 등에 대해 정리해보겠습니다.

E2E Test란?

End-to-End 테스트의 약자로 말그대로 사용자의 중심에서 어플리케이션의 처음부터 끝까지 그 흐름을 테스트하는 소프트웨어 테스트 방법 중 하나입니다. E2E 테스트를 통해 실제 유저 시나리오를 시뮬레이션하고 이를 통해 어플리케이션 구성 요소의 통합 및 데이터의 무결성을 검증할 수 있습니다.

Cypress는 뭘까?

개발자는 Cypress를 통해 E2E 테스트를 훨씬 편하게 구현하고 다룰 수 있습니다. 어플리케이션 내에서 유저가 취할 수 있는 다양한 행동 방식과 그 결과값을 테스트 코드로 작성하고 검증함으로써, 테스트에 들어가는 시간을 매우매우매우 아낄 수 있게 됩니다. 또한, Cypress는 GUI를 통해 더 쉽게 다룰 수 있고, E2E뿐 아니라 통합, 단위 테스트까지 지원합니다.

그렇다면 단위, 통합 테스트는 또 뭐지?

• 단위 테스트 : 가장 작은 단위의 테스트로, 주로 모듈 즉, 함수에 대한 테스트를 말합니다. 작성 비용이 적고 실행 속도가 빠릅니다. 아무래도 단위가 가장 작기에, 빠르게 문제를 발견하고 해결할 수 있습니다.

function example = (a, b) => a + b;
// 이 때, 1과 2가 변수로 들어갔을 때, 3이 나오는지 테스트 -> 단위 테스트

• 통합 테스트 : 모듈과 모듈 간의 관계를 테스트하는 것을 말합니다. 단위 테스트보다 작성이 어렵고 속도가 느립니다. 실패 시에, 어떤 모듈에서 실패한건지 혹은 모듈 각각은 문제가 없더라도 어떤 상호작용에서 문제가 생긴 것인지 등등 다소 정확히 문제 원인을 파악하기가 어렵다는 단점이 있습니다.

• E2E 테스트 : 통합 테스트보다 더 큰 개념으로, 유저의 행동에 따라 이뤄지는 어플리케이션의 시작과 끝까지의 테스트입니다.

Cypress 다루기

먼저 Cypress를 설치해야합니다. 뭐가 됐든, 처음 배울 때는 꼭꼭꼭 공식문서(cypress)를 들어가서 열심히 getting started를 찾아서 눌러보도록 합니다!!

기존 프로젝트 root 디렉토리에서 아래의 명령어로 cypress를 설치합니다.

# 개발 의존성으로 설치
npm install cypress --save-dev

# cypress 실행(2가지 모두 가능)
npx cypress open
./node_modules/.bin/cypress open

이후 cypress 폴더 -> e2e 폴더 내부에 appName.cy.js와 같이 appName이라는 어플리케이션에 대한 테스트 파일을 생성합니다.

공식문서를 통해 더 다양한 함수와 커맨드가 있지만, 아주 간단한 테스트 코드를 작성해보겠습니다.

describe('어떤 어플리케이션인지 적어주세요.', () => {
  // 어플리케이션에 진입합니다.
  beforeEach(() => {
    cy.visit('어플리케이션의 url 주소를 적어주세요.');
  });

  it('버튼을 클릭 시, 0이 입력됩니다.', () => {
    cy.get('.button').click();
    cy.get('.answer').invoke('text').should('eq', String(0));
  });
});

사실 구체적인 어플리케이션은 없지만, 대부분의 e2e 테스트 코드는 위와 같은 양식을 갖게 됩니다.

1. 어플리케이션에 진입
2. 어떤 결과가 나오는 테스트인지 정의
3. 테스트를 위해 어떤 요소를 선택하고 어떤 이벤트를 발생시킬지 작성
4. 3번의 과정을 통해 어떤 요소의 값이 어떤 값을 가지면 되는지 검증

그래서 굳이 Test를 해야하는 이유가 있나?

처음엔 저도 결국엔 또 코드를 짜는 일인데, 굳이 테스트를 해야하는건가? 싶었습니다. 위의 간단한 테스트야, 제가 직접 유저의 입장이 되어 이벤트를 발생시켜보고 이것저것 요리조리 만져보면 될테니까요! 하지만, 우리가 업무를 진행하면서 기획자, QA, 유저 등등에게 매번 수동으로 어플리케이션이 문제가 없음을 보여줄 수는 없습니다.(너무나 많은 시간 소비). 개발자란 자고로 문제를 해결하고 자동화를 해야하는 법..! 이렇게 번거로운 과정을 간단한 코드 몇줄로 단시간에 여러번 돌려볼 수 있고, 무엇보다 개발자 본인도 본인의 코드에 대한 확신과 자신감을 얻을 수 있기에 테스트 코드를 작성해야합니다.(필수 필수) 단, 배보다 배꼽이 크면 안되듯, 되려 간단한 기능에 대해서 하나하나 테스트 코드를 작성하게 되면 오히려 더 비효율적인 상황이 됩니다. 따라서 테스트 코드를 작성함으로써 가장 크게 효율을 얻을 수 있는 적당함을 가지는 것도 중요합니다.

그렇다면 좋은 테스트란 뭘까?

• 실행 속도가 빠를 것
• 본 코드가 리팩토링되어도 테스트는 그대로 잘 작동될 것
• 디버깅이 가능할 것
• 테스트 결과가 항상 일정하고 안정적일 것
• 테스트의 의도(사람이 보는 것)가 명확할 것

Reference

• 인프런(메이커준 - 하루만에 Cypress로 작성하는 자바스크립트 E2E 테스트 코드
• Cypress 공식문서