회사 프로젝트 Hydration 실패 Github Action으로 테스팅하기 (feat. cypress)

목차

• 문제 정의
• Cypress?
• Cypress hydration test 작성
• Local에서 테스트 해보기
• Github action 연동하기
• 작동 동영상
• 질문타임

문제 정의

문제가 뭐였길래?

🚨 우리의 개발 환경은 빠르게 개발을 하기 위해 CSR 환경이다. 배포 환경은 SSR 환경이다.

👉 개발 환경과 배포 환경이 다르기 때문에 빠른 머지를 할때 build test를 건너 뛰기 쉽다.

👉 다른 사람 코드를 건들이기 어렵다.

👉 hydration 테스트가 귀찮다.

그래 ! 😎 그럼 Cypress로 Hydration 테스트를 자동화를 하자!

Cypress가 뭔가유? 먹는건가유?

Cypress에 대해서 알아보자!

Cypress는 Javascript End to End 테스트 프레임워크 입니다.

더 많은 정보를 원하신다면 여기를 클릭해주세요!

Cypress hydration test 작성하기 -1 📝

console.warn & error Spy 해버리기!

// support/index.js

Cypress.on('window:before:load', (window) => {
  cy.spy(window.console, 'error').as('spyWinConsoleError'); // alias
  cy.spy(window.console, 'warn').as('sypWinConsoleWarn'); // alias
})

// 이렇게 alias 를 가져와서 사용 할 수 있다 !
cy.get('@spyWinConsoleError')

왜 spy를 해야할까요?

👉 Hydration 실패시 가장 먼저 나는 warning이 Parents Node not match... 이기 때문입니다.

Cypress hydration test 작성하기 -2 📝

/** @type {string[]} */
const HYDRATION_TEST_PATHS = [
  // hydration test를 원하는 path를 적어줍니다.
  '/b/pubg/leagueGuide',
  '/b/pubg/newsFeed',
  '/b/pubg',
  '/b/pubg/leagueResult',
];

describe('Hydration test for pubg service', () => {
  for (const path of HYDRATION_TEST_PATHS) {
    it (`visit: ${path}`, () => {
      cy.visit(path, { timeout: 30000 });
      // eslint-disable-next-line cypress/no-unnecessary-waiting
      cy.wait(1500);
      // 여기서 hydration 관련 에러가 나는지 체크를 해준다.
      cy.get('@sypWinConsoleWarn').should('not.be.calledWithMatch', 'Mismatching childNodes vs. VNodes: ');
    });
  }
});

Cypress hydration test 작성하기 -3 📝

궁금증이 생겨나는 부분들...

1. 그냥 router에서 path를 export 시켜서 자동적으로 path에 등록이 되게 하면 안되나여? 🤔

👉 hydration을 사용안하는 page도 있을테고 hydration test가 중요한 페이지가 아닐수도 있습니다
( 가령 내부 어드민 페이지). 그래서 cypress에서 hydration을 통한 테스트는 명시적으로 붙여줘야 한다고 생각했습니다.

2. 테스트가 코드 path가 많아 질수록 테스트 시간이 길어질거 같은데여? 🤔

👉 네 늘어나겠지요. 그래서 더더욱 path를 자동화 시키지 않고 명시적으로 변경을 할 수 있게 하였습니다.
테스트가 많아지면 테스트 시간이 길어지는 것은 당연하나, 정말 필요한 것들만 테스트를 하고 싶었습니다.
그래야 좀 더 효율적인 test가 될 것이라 생각했습니다. 예를 들어 몇번 돌린 path는 제거를 한다던지 새로운 path만 추가한다던지 같은요.

Local에서 테스트 해보기

빌드 명령어

yarn build:local
yarn start:local # 먼저 서버를 띄운다.
yarn test:hydration # 서버를 띄운 후 test를 시작한다.

왜 vue-cli 처럼 동시에 서버를 띄워지고 + test 실행을 안해?

• 빌드는 가만히 두고 cypress만 테스트 코드만 바꿀수 있기 때문.
• 다른 cypress 테스트들이랑 충돌을 내고 싶지 않기 때문.
• github workflow랑 동일한 테스트를 하고 싶기 때문.

GitHub action 연동하기 -1 ⚡️

# .gibhub/workflows/hydration-cypress.yml
# List of jobs
jobs:
  cypress-run:
    if: contains( github.event.pull_request.labels.*.name, 'pubg') # 레이블이 pubg일때 만 실행
    runs-on: ubuntu-20.04
    container: cypress/browsers:node14.17.0-chrome88-ff89
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Cypress run
        uses: cypress-io/github-action@v2
        with:
          working-directory: services/pubg # pubg로 이동!
          build: yarn build:local # build:local -> logger 때문에
          start: yarn start:local 
          wait-on: http://localhost:9000
          wait-on-timeout: 120
          command: yarn test:hydration
          browser: chrome 

GitHub action 연동하기 -2 ⚡️

이제 위 태그를 붙이면