시각화 테스트 - 우아한 기술 블로그

E2E Test - React

Jest + puppeteer 를 이용한 시각화 테스트

• puppeteer 는 아래와 같이 소개하고 있습니다

시각화 테스트는 스타일 오류를 잡는데 효과적

요구사항

페이지 단위로 테스트. ex) Home, Nft, Search ... 등

Bitbucket Pipeline에 테스트 step을 추가하여 테스트 확인

1. 의존성 설치

• https://github.com/americanexpress/jest-image-snapshot
• https://github.com/smooth-code/jest-puppeteer
• https://github.com/puppeteer/puppeteer

$ yarn add -D @types/jest-image-snapshot cross-env jest jest-image-snapshot jest-puppeteer puppeteer ts-jest

# cross-env 개발중단 -> dotenv-cli로 대체 가능 - 2022.04.25

1. E2E test 파일 구조

   

   테스트파일 : test/e2e(테스트단위)/case/...

   • jest.config.js - jest config 파일
   • jest-puppeteer.config.js - jest-puppeteer config 파일
   • jest-image-snapshot.ts - jest.config.js 의 setupFilesAfterEnv에 설정된 파일로, 환경 구성이 완료된 후 Jest가 가져와서 실행할 파일

   시각화 테스트를 위한 스냅샷을 생성해줌

   • imageComparison.ts - jest-image-snapshot 패키지로 이미지 비교 방식과 결과를 출력할 방식을 설정
   • initialize.ts - puppeteer에서 사용할 객체를 정의. 페이지 초기화 및 종료를 위한 유틸리티 구성

   *) 크로미움 프로세스를 정리하지 않으면 과도한 메모리 누수가 있을 수도 있음

2. 테스트를 진행할 명령어

   "scripts": {
       "start:dev": "dotenv -e .env.development craco start",
       "start:prod": "dotenv -e .env.production craco start",
       "build": "CI=false craco build",
       "build:local": "dotenv -e .env.local-production craco build",
       **"test:dev": "export PORT=4444 && craco start",
       "visualization-test:test": "dotenv -v JEST_PUPPETEER_CONFIG=./src/test/e2e/jest-puppeteer.config.js jest --config=./src/test/e2e/jest.config.js",
       "visualization-test:update": "dotenv -v JEST_PUPPETEER_CONFIG=./src/test/e2e/jest-puppeteer.config.js jest --config=./src/test/e2e/jest.config.js --updateSnapshot",**
       "generate:sitemap": "babel-node ./sitemap-builder.js",
       "test": "craco test",
       "eject": "craco eject"
   }
   

   visualization-test:test - 테스트 실행

   visualization-test:update - 스냅샷 업데이트

3. 테스트 파일 생성

   • VisualRegression.test.ts - 화면을 불러와 바로 스크린샷을 찍은 뒤 화면을 저장하거나 비교하는 테스트

4. 정적인 페이지가 아닌 상세페이지와 같이 동적인 요소를 추가하는 페이지는 ...? - mocking

   • mocking

5. 추가) 페이지별 로딩 및 테스트파일의 생성, 모듈화