sangminnn / test-example-shopping-mall

실무에 바로 적용하는 프런트엔드 테스트 쇼핑몰 예제

강의 정보

• 1부: https://inf.run/ba6qp
• 2부: https://inf.run/qwKc6

이 프로젝트는 "실무에 바로 적용하는 프런트엔드 테스트"에서 사용되는 예제입니다.

사용 기술 스택

Types	Techs
Front	zustand
Server
Build tool
Test	MSW Chromatic

실행

$ nvm use # node 19.9.0 버전을 사용합니다.
$ npm i
$ npm run dev # 노드 서버와 vite 개발 서버를 동시에 실행합니다.

브랜치 소개

각 장에서 사용하는 브랜치와 정답 브랜치입니다. 강의를 진행 하실 때는 강의 브랜치를, 테스트를 작성하고 정답을 확인하고 싶으시다면 정답 브랜치를 확인해주세요!

⚠️ 강의를 시작할 때 강사님이 어느 브랜치를 사용하는지 알려드리니 참고해서 진행해주세요!

1부

• 2장. 단위 테스트란?
  • 강의: unit-test-example
  • 정답: unit-test-example-with-answer
• 3장. 단위 테스트 작성하기
  • 강의: shopping-mall-unit-test
  • 정답: shopping-mall-unit-test-with-answer
• 4장. 통합 테스트란? / 5장. 통합 테스트 작성하기
  • 강의: shopping-mall-integration-test
  • 정답: shopping-mall-integration-test-with-answer

2부

• 2장. 스냅샷 테스트
  • 강의: shopping-mall-snapshot-test
  • 정답: shopping-mall-snapshot-test-with-answer
• 3장. Storybook과 Chromatic을 활용한 시각적 회귀 테스트
  • 강의 / 정답: shopping-mall-visual-test
• 4장. E2E 테스트란?
  • 강의: shopping-mall-e2e-test-example
  • 정답: shopping-mall-e2e-test-example-with-answer
• 5장. Cypress를 활용한 E2E 테스트 작성하기
  • 강의: shopping-mall-e2e-test
  • 정답: shopping-mall-e2e-test-with-answer

업데이트

• msw 2.0 적용(msw-2.0)