Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ssi02014/react-testing-tutorials

리액트 테스트 튜토리얼 🤓
https://github.com/ssi02014/react-testing-tutorials

jest react react-testing-library

Last synced: about 1 month ago
JSON representation

리액트 테스트 튜토리얼 🤓

Host: GitHub
URL: https://github.com/ssi02014/react-testing-tutorials
Owner: ssi02014
Created: 2022-06-21T13:32:13.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2022-09-15T14:53:52.000Z (over 2 years ago)
Last Synced: 2024-11-08T01:52:27.641Z (3 months ago)
Topics: jest, react, react-testing-library
Language: JavaScript
Homepage:
Size: 1.27 MB
Stars: 5
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # 💻 React Testing Tutorial

## 📖 참고

- [Jest Matchers 종류](https://github.com/ssi02014/React-Testing-Tutorials/blob/master/readme/jest-matchers.md)




## 📖 개념 정리 목차

- [Section 1 - 소개](https://github.com/ssi02014/React-Testing-Tutorials/blob/master/readme/section-1.md)

  - 리액트 기본 App.test.js 파일 분석

  - Jest 단언(assert)

  - Jest DOM

  - Jest

  - TDD

  - React Testing Library(RTL)

  - 유닛 테스트 vs 기능 테스트

  - 테스트 접근성




- [Section 2 - Color Button](https://github.com/ssi02014/React-Testing-Tutorials/blob/master/readme/section-2.md)

  - Color Button(1) - 첫 레드/그린 테스트

  - Color Button(2) - 기능(functional) 테스트(with. 클릭 이벤트)

  - Color Button(3) - 인수(Acceptance) 테스트

  - Color Button(4) - 버튼, 체크박스 초기 조건 테스트

  - Color Button(5) - 체크박스 기능 추가(퀴즈 풀이)

  - Color Button(6) - 라벨이 있는 체크박스 찾기

  - Color Button(7) - 비활성화된 버튼 회색으로 봐꾸기(퀴즈 풀이)

  - Color Button(8) - 함수 유닛(Unit)테스트

  - Color Button(9) - 스펙 변경을 통한 코드 수정

  - Color Button(10) - 유닛 테스트를 하는 경우(추가 설명)




- [Section 3 - ESLint 설정](https://github.com/ssi02014/React-Testing-Tutorials/blob/master/readme/section-3.md)

  - ESLint 설정




- [Section 4 - Sundaes on Demand](https://github.com/ssi02014/React-Testing-Tutorials/blob/master/readme/section-4.md)

  - Sundaes on Demand(1) - App 개요

  - Sundaes on Demand(2) - 스타일링 셋팅(react-bootstrap)

  - Sundaes on Demand(3) - SummaryForm 구조

  - Sundaes on Demand(4) - SummaryForm: 체크박스 활성화 버튼

  - Sundaes on Demand(5)

    - Popover Test

    - useEvent

    - screen query methods




- [Section 5 - Mock Service Worker(MSW)로 서버 응답 시뮬레이션](https://github.com/ssi02014/React-Testing-Tutorials/blob/master/readme/section-5.md)

  - MSW(1) - Mock Service Worker와 핸들러 소개

  - MSW(2) - MSW로 스쿱 옵션 테스트하기

  - MSW(3) - MSW Error 테스트

    - test.only/skip




- [Section 6 - Provider에 래핑된 컴포넌트 테스트하기](https://github.com/ssi02014/React-Testing-Tutorials/blob/master/readme/section-6.md)

  - Provider(1) - 텍스트 입력란 채우기: 소계 테스트

  - Provider(2) - 테스트 설정에 Context 추가하기

  - Provider(3) - Provider Wrapper(CustomRender) 적용

  - Provider(4) - update toppings subtotal

  - Provider(5) - 총계(Grand total)

  - Provider(6) - act(...), Unmounted Component 에러

  - Provider(7) - 기능 테스트는 무엇을 잡아야 하나?




- [Section 7 - 최종 섹션: 주문 단계](https://github.com/ssi02014/React-Testing-Tutorials/blob/master/readme/section-7.md)

  - 최종 섹션(1) - Happy Path Test

    - 디버깅 팁, 주요 테스트 에러와 해결책

  - 최종 섹션(2) - orderPhase 테스트 코드

  - 최종 섹션(3) - Jest Mock(모의) 함수