cypress를 활용한 E2E 테스트

E2E 테스트는 왜 하는가?
:: 유닛 테스트가 각각의 기능에 대한 단위 테스트라고 한다면 E2E테스트는 실제 브라우저 환경에서 어떻게 동작하는 지를 사용자의 관점에서 테스트하는 것이다. 사용자 관점에서 어떤 인터렉션에 대한 브라우저 환경에서의 실제 동작을 테스트한다고 생각하면 된다.

 

1. cypress와 testing library에서 제공하는 cypress를 같이 설치
 * 클래스 이름이나 요소를 통해서 찾는 것보다 testing library에서 제공하는 getBy, findBy와 같은 것을 이용해서 찾는 것이 테스트가 작은 변화로 인해서 깨지는 것을 방지할 수 있기 때문.

npm install --save-dev cypress @testing-library/cypress

 

Cypress Testing Library | Testing Library

 

2. cypress 실행

 * cypress를 실행하고 나서 어떤 브라우저 환경에서 실행할 것인지, 예제 코드를 제공받을 것인지 등등에 대해서 선택을 하면 된다.

npx cypress open

 

3. cypress.config.js 세팅

const {defineConfig} = require('cypress')

module.exports = defineConfig({
 e2e: {
  baseUrl : '베이스 주소',
  setupNodeEvents(on, config){
  },
 },
});

 baseUrl이 설정되면 visit에서 기본경로로 방문하도록 하면 baseUrl로 접근함.

cy.visit('/');

4. 테스트 관련 import 추가

/// <reference types="cypress" />
import '@testing-library/cypress/add-commands'

 

5. 비동기 서버 api 데이터 모킹

 * cypress 폴더 내에 fixtures 폴더에 사용할 json 파일 생성

 

6. 서버 데이터 interceptor 작업

cy.intercept('GET', /(경로)/g, {
 fixture: '모킹 json 파일명(ex : example.json),
});

 

7. 테스트 해상도 설정

cy.viewport(x, y);

8. 테스트 진행(공식문서 예제)

cy.findByRole('button', {name: /Jackie Chan/i}).click()
cy.findByRole('button', {name: /Button Text/i}).should('exist')
cy.findByRole('button', {name: /Non-existing Button Text/i}).should('not.exist')
cy.findByLabelText(/Label text/i, {timeout: 7000}).should('exist')

// findByRole _inside_ a form element
cy.get('form')
  .findByRole('button', {name: /Button Text/i})
  .should('exist')
cy.findByRole('dialog').within(() => {
  cy.findByRole('button', {name: /confirm/i})
})

결론적으로 브라우저에서 어떻게 동작하는지 실제 확인이 가능한 점에서
반드시까지는 아니더라도 있다면 좋을 것 같다라는 생각이 들었다.

테스트가 된다면 브라우저에서의 호환성 문제라던가
실제 인터렉션에서 dom이 아닌 브라우저에서의 동작여부를 테스트 할 수 있다는 점에서
확실히 컴포넌트에 대해 유닛/통합/스냅샷 테스트를 진행하는 것과는
확연히 다른 테스트라는 것은 알 수 있었다.