Unit testing tool

1. Jest

• 코드가 제대로 동작하는지 확인하는 Test Case를 만드는 JS 테스팅 프레임워크
• Jest는 라이브러리 하나만 설치하면, Test Runner와 Test Mather 그리고 Test Mock 프레임워크까지 제공

💡 Mocking?
테스트를 독립시키기 위해 의존성을 개발자가 컨트롤하고 검사할 수 있는 오브젝트로 변환하는 테크닉
Jest에서 Mocking을 이야기 하는 것은 보통 의존성을 Mock function 으로 대체하는 것을 의미함
jest-mocks 설명 링크

• 자체 assertion 지원

💡 Assertion? 테스트의 통과 여부를 결정, Jest의 expect( )

test("array", () => {
  const colors = ["Red", "Yellow", "Blue"];
  expect(colors).toHaveLength(3);
  expect(colors).toContain("Yellow");
  expect(colors).not.toContain("Green");
});

• 수행 기능
  • 독립적인 컴포넌트 테스트
  • 컴포넌트의 public API 테스트
  • ‘클릭’ 과 같은 사용자 이벤트 테스트
  • 스냅샷 생성, 병렬화 및 비동기 방식 수행
• 설치
  • npm install --save-dev jest

React testing library

• React app 및 component를 테스트에서 상호 작용 시킴 (클릭, 입력 등의 실제 사용자 이벤트를 쉽게 시뮬레이션 가능)
• 테스트를 렌더링할 때 실제 DOM 노드를 사용함
  • 사용자가 웹 브라우저에서 애플리케이션을 실행하는 실제 환경과 유사한 환경에서 테스트 케이스가 실행되는 것을 의미

보통 React testing library + Jest를 함께 사용

2. Mocha

• 테스트 러너를 지원
• 자체 assertion은 지원 안함, Node.js에서 지원하는 Assertion 모듈을 사용할 수도 있으며, Chai나 Should.js 같은 BDD, TDD 방식의 다양한 Assertion 라이브러리가 있음
• Jest에 비해 mocking과 같은 특정 영역의 complexity가 부족
• auto-mocking과 스냅샷 테스팅이 쉽지 않음
• 수행 기능
  • 동기식 및 비동기식 테스트 모두 실행
  • 모든 주요 웹 브라우저에서 테스트 케이스 원활하게 수행
• 설치
  • npm install --save-dev mocha

E2E testing tool

1. Cypress

https://taenami.tistory.com/132

특징

• e2e 테스팅
• JS, TS 지원
• cypress test runner를 설치하고 테스트 작성
• 테스트가 실행될 때 스냅샷 생성 → 각 단계에서 발생한 일 파악 가능
• 애플리케이션과 동일한 환경에서 실행
• node 위에 동작하는 서버를 띄워 실제 브라우저 위에서 테스트 진행
• 자동화 프로세스를 제어하여 일관된 결과 도출
• 테스트가 실행되는 동안 개발자 도구 사용 가능, 모든 콘솔 메시지, 모든 네트워크 요청 확인 가능
• vscode plugin 지원(helper)
• CI/CD 서버와의 통합
  • CircleCl, Github action과 같은 CI/CD와 원활하게 통합됨 → 개발 워크플로우 내 자동화 프로세스
• Multi-tab을 지원하지 않기 때문에, 테스트 페이지가 새로운 탭으로 리다이렉트 되는 경우에는 테스트를 진행할 수 없다는 단점이 있다.

테스팅 접근 가능 요소

• document
• window
• DOM 요소
• 응용 프로그램 인스턴스
• 함수
• 타이머

테스트 타입

• e2e
  • 원래 Cypress는 브라우저에서 실행되는 모든 항목에 대해 E2E 테스트를 실행하도록 설계
  • 브라우저에서 App 방문, 실제 유저처럼 UI 통해 작업 수행
    • 수행 단계 예
      • 특정 URL로 이동
      • 로그인 버튼 클릭하기
      • 사용자 이름과 비밀번호 입력하기
      • 사용자 설정으로 navigating
      • 로그아웃하기
• components https://docs.cypress.io/guides/component-testing/overview#What-is-Component-Testing
  
• API
  • Cypress는 임의의 HTTP 호출을 수행할 수 있으므로 API 테스트에 사용할 수 있습니다.

2. Playwright

https://hyperconnect.github.io/2022/01/28/e2e-test-with-playwright.html

https://playwright.dev/docs/intro

https://devocean.sk.com/blog/techBoardDetail.do?ID=165090

특징

• e2e 테스트
• JS, TS, Python, Java 등 지원
• 크로스 브라우징 (크로미움, 파이어폭스, 웹킷) 테스트 가능
• 여러 탭이나 윈도우를 사용하는 시나리오 구현 가능
• 여러 페이지와 도메인에 걸쳐 있는 테스트 시나리오 구현 가능
• CI/CD 서버와의 통합
  • TravisCl, CircleCl, Jenkins, Github action과 같은 CI/CD와 원활하게 통합됨 → 개발 워크플로우 내 자동화 프로세스
• Docker 이미지 사용해서 클라우드에 쉽게 배포 가능
• cypress보다 빠르다
• playwright 자체는 E2E 테스트 프레임워크가 아님 / 브라우저를 컨트롤할 수 있는 API를 제공하는 프로그램
  • 테스트를 하기 위해선 @play/wright/test를 같이 사용해야 함
• 테스트 관련 툴 제공
  • Codegen: 화면 상에서의 테스팅 동작을 테스트 코드로 변환해줌
  • playwright test for VSCode: plugin으로 실행과 디버깅을 더 편리하도록 도와줌
• 최근 언급되는 테스팅툴로 cypress에 비하면 참고자료가 적을 수 있음

Cypress VS Playwright

e2e 테스트 도구로 Playwright를 선택한 이유

https://seungahhong.github.io/blog/2023/04/2023-04-02-playwright/

1. 테스트 속도

Playwright

Playwright는 하나의 테스트 파일 당 하나의 워커를 실행

테스트 파일이 여러개 있으면 각각의 워커에서 병렬적으로 동시에 진행할 수 있어 훨씬 빠른 테스트 결과를 받을 수 있음

Cypress

Cypress에서 제공하는 클라우드(유료)를 사용해야 병렬화가 가능

2. 지원 브라우저

Playwright

• Chromium
• Firefox
• WebKit (safari, 모바일 브라우저에서 사용하는 오픈소스 프레임워크)
• Chrome & Edge (playwright의 기본값 설정은 아님)

Cypress

• Chrome
• Edge
• Electron
• Firefox

3. 지원하는 사용자 이벤트

Playwright

hover, drag 지원함

Cypress

hover, drag 지원 안 함

4. 문법

Playwright

자바스크립트 문법 그대로 사용 가능. selector(Locator)와 expect(Assertions)만 알고 있으면 됨.

Cypress

cypress에서 자체적으로 제공하는 API와 문법 사용 (러닝커브 존재)

결론

Unit test에서는 React testing library와 Jest를 사용하고, E2E test는 Playwright를 사용하기로 했다.
둘 다 JS 문법이므로 한 가지만 마스터하면 다른 툴도 손쉽게 사용할 수 있을 거라고 생각했고, 프로젝트에서 특정 버튼을 클릭하면 새 탭을 보여줘야 하는 경우가 있기 때문에 Cypress는 쓰기 어려울 거라고 판단했다.