feat: jest, react-testing-library setting #5

chaaerim · 2023-02-17T11:07:31Z

🚀 작업 내용

jest, react-testing-library 세팅을 했습니다.

✏️ 상세 설명

테스팅 하실 때 참고가 될 수 있을 것 같아 세팅하면서 만들었던 test 폴더와 파일을 함께 push 합니다. (삭제하셔도 무방합니다. )
package.json의 test 스크립트에서 passWithNoTest는 해당 파일이 없을 때 test를 통과시키는 옵션입니다.
pnpm test 스크립트를 사용하여 테스팅을 진행할 수 있습니다.
제가 작성한 테스트 내용은 해당 파일에 Home이라는 텍스트가 있는지 검사를 진행하고 성공시 toMatchSnapshot() 메소드를 이용하여 스냅샷 파일을 만드는 테스트입니다.
임의로 루트에 tests 폴더를 생성해두었는데 test를 진행할 디렉토리는 논의하에 추후 변경하여도 좋을 것 같습니다.

📷 스크린샷

📁 참고 자료

jest, react testing library 환경 세팅 시 참고
https://velog.io/@leehyunho2001/Next.js-TypeScript-환경에서-Jest와-testing-library-사용하기
스냅샷 테스팅 관련 내용
https://www.daleseo.com/jest-snapshot/

L2HYUNN

LGTM

* feat: input 컴포넌트 구현 (#2) * feat: input 컴포넌트 구현 * fix: install pnpm * refactor: 타이포 토큰 적용 * feat: modal 컴포넌트 구현 (#4) * feat: modal 컴포넌트 생성 * feat: modal 컴포넌트 구현 * refactor: type 변경 및 리뷰 반영 * refactor: modal interface 제거 * feat: icon 컴포넌트 구현 (#3) * feat: svg 저장 * feat: icon 컴포넌트 구현 * refactor: icon 바로 export * refactor: span 태그로 변경 * refactor: icon type * feat: button 컴포넌트 구현 (#6) * fix: rem을 위한 html fontSize 수정 * refactor: text 컴포넌트 type 선언 위치 변경 * style: 누락 및 변경된 theme 추가 * feat(button): button 컴포넌트 추가 * chore(button): button 컴포넌트 예제 추가 * refactor(text): text 컴포넌트 스타일 타입명 변경 * feat: jest, react-testing-library setting (#5) * feat: jest, react-testing-library setting * chore: paths 수정 * fix: fix conflict * feat: select 컴포넌트 구현 (#7) * feat: mount, update 관련 hooks 추가 * feat: void callback type 추가 * feat: select 컴포넌트 추가 * feat: select 컴포넌트 예제 코드 추가 * chore: local pnpm 패키지 제거 * style: select 컴포넌트 margin top 추가 * feat: header 컴포넌트 구현 (#9) * feat: sign up 레이아웃과 로직 구현 (#10) * feat: 회원가입 레이아웃 및 로직 작업 * feat: sign up validation check 로직 추가 * feat: signUp 성공시 모달창 보여주기 * chore: console 삭제 및 주석 달기 * feat: 비밀번호 최대 길이 20자로 제한 * refactor: button 컴포넌트 리팩토링 (#11) * style: reset css 버튼 disabled cursor 조건 추가 * style: theme 디자인 시스템 변경 적용 * refactor: button 컴포넌트 리팩토링 * feat: toast component 구현 (#14) * feat: login (#13) * feat: 로그인, 회원가입 레이아웃 및 로그인 로직 구현 * feat: axios 에러 커스텀 * chore: 주석 추가 * feat: axios request interceptors 추가 * feat: 답변 Bubble 컴포넌트 구현 (#16) * feat: 답변 Bubble 컴포넌트 구현 * chore: 폴더 rename * refactor: 중복 코드 제거 * feat: user answer bubble 컴포넌트 구현 (#17) * feat: input bubble 컴포넌트 구현 (#18) * refactor: toast design system 적용 (#21) * setting: jest eslint 설정 추가 및 유틸 파일 추가 (#19) * chore: jest 관련 사용하지 않는 패키지 제거 * chore: 지속적으로 문제가 생기는 Home 테스트 코드 제거 * chore: main에 button에서 발생하던 문제 해결 * feat: jest 관련 eslint plugins 추가 * feat: jest eslint plugin 설정 적용 * chore: testing library 패키지 재설치 * fix: jest-dom eslint 설정 오탈자 수정 * fix: jest 설정 변경 * feat: 커스텀 랜더를 위한 testUtils 추가 * feat: button 랜더링 및 작동 테스트 추가 * chore: 불필요한 export 제거 * fix: button test describe 이름 변경 * setting: test CI 및 codecov 부착 (#20) * feat: test ci 추가 * feat: codecov 설정 및 CI 추가 * fix: 스크립트 오탈자 수정 * feat: 로그인 로직 작업 완료 및 비밀번호 재설정 레이아웃 (#22) * feat: 로그인 로직 작업 완료 및 비밀번호 재설정 레이아웃 * refactor: console 삭제 * refactor: 환경변수 적용 * feat: 비밀번호 재설정 api fetching (#23) * feat: category 페이지 구현 (#24) * feat: useBackGroundColor hook 추가 * feat: layout에 background color 적용 * refactor: 공통 hook 폴더 분리 * fix: axios request interceptors 헤더 Bearer 추가 * feat(hooks): useMounted hook 추가 * feat: client suspense 추가 * feat: client suspense 적용 * feat: 로그인 성공 이후 카테고리 페이지로 리다이렉트 추가 * feat: main 카테고리 호출 api 로직 추가 * fix: select 컴포넌트가 undefined 또한 주입 받을 수 있게 설정 추가 * feat: bottom fixed button 추가 * feat: category 페이지 추가 * feat: production env 파일 git ignore 추가 * feat: dynamic category 페이지 추가 * feat: single bottom fixed button 테스트 추가 * feat: category detail 페이지 구현 (#25) * feat: category 페이지 getStaticProps 리턴 타입 추가 * fix: suspense 문제 임시 조치 * feat: mid category api 관련 로직 추가 * feat: next 외부 이미지 사용 설정 추가 * feat: category detail 페이지 추가 * fix: next config image hostname 변경 * feat: question 페이지 구현 (#26) * feat: question 관련 api 로직 추가 및 일부 네이밍 수정 * fix: 변경된 api 이름 적용 * fix: question dynamic route path 변경 * refactor: useBackGroundColor route 로직 개선 * feat: question 페이지 추가 * fix: next config s3 url 수정 * refactor: early return을 통한 타입 undefined 문제 개선 * refactor: category 페이지 early return을 통한 타입 undefined 문제 개선 * feat: onboarding page 작업 완료 (#27) * feat: chip component 구현 (#28) * feat: chip component 구현 * chore: 공백 삭제 * test: Icon 컴포넌트 테스트 추가 (#30) * feat: jest svg 관련 설정 수정 및 추가 * refactor: icon import 방식 변경 * test: icon 테스트 추가 * feat: question answer 기능 구현 (#31) * feat: main 카테고리 호출 api 로직 추가 * feat: mid category api 관련 로직 추가 * feat: question 관련 api 로직 추가 및 일부 네이밍 수정 * feat: question 페이지 추가 * feat: question answer 관련 api 로직 추가 * feat: double bottom fixed button 추가 * feat: question answer 로직 추가 * chore: 불필요한 변경 제거 * feat: token refetch 로직 추가 (#32) * feat: analytics tools 추가 (#34) * feat: google analytics 설정 추가 * feat: hotjar 설정 추가 * feat: mypage 작업 완료 (#33) * feat: mypage 작업 완료 * chore: tsconfig 수정 * fix: 오타 수정 * fix: querykey 바뀐 것 수정 * feat: 404page 작업 (#35) * feat: 404 page 구현 * chore: fix lint error * setting: playwright 설정 및 예제 추가 (#36) * feat: playwright 설정 및 예제 추가 * feat: playwright eslint plugin 추가 및 적용 * chore: jest test ignore pattern 추가 * chore: response.d.ts lint 적용 * test: 비로그인시 홈화면에 대한 e2e 테스트 추가 * feat: question 페이지 구현 v2 (#37) * refactor: api base url 수정 및 deprecated api 명시 * refactor: deprecated response 명시 * refactor: 질문 생성 api v2 추가 및 적용 * feat: 질문 답변 저장 api 및 mutation hook 추가 * feat: 질문 api v2 추가 및 query hook 추가 * refactor: question api 변경점 추가 및 적용 * feat: question 컴포넌트 추가 * feat: questions 페이지 구현 * refactor: AIBubble 변경된 디자인 적용 (#39) * refactor: api base url 수정 및 deprecated api 명시 * feat: 질문 api v2 추가 및 query hook 추가 * refactor: question api 변경점 추가 및 적용 * refactor: bubble에 chip 컴포넌트 적용 * refactor: 변경된 AI 답변 텍스트 디자인 적용 * feat: 헤더 변경 및 favicon, og tag 적용 (#40) * feat: 카테고리 헤더 적용 및 뒤로가기 버튼 클릭시 모달 overlay * feat: right icon 색 변경 가능하게 수정 * feat: favicon, og-tag 적용 * feat: responsive 디자인 적용 (#41) * feat: desktop media query theme 추가 * feat: 디자인에 따른 desktop 반응형 적용 * setting: auto release tag action 추가 (#42) * chore: 배포 버전 명시 * feat: auto release tag action 추가 * hotfix: Release 1.0.0 deploy error 해결 (#44) * fix: 변경된 s3 url 적용 * fix: useShowLoginModal prop undefined 에러 임시 조치 * feat: useModal Dimmer 반응형 적용 * fix: useQuestionAnswer hook api import 에러 해결 * fix: useModal import warning 해결 * feat: title ,description seo 추가 * fix: page api 캐싱으로 인해 이전 질문이 잠시 보이는 문제 해결 --------- Co-authored-by: chaerim kim <89721027+chaaerim@users.noreply.github.com>

chaaerim requested a review from L2HYUNN as a code owner February 17, 2023 11:07

github-actions bot added the Type: Feature 유형: 기능 추가 label Feb 17, 2023

L2HYUNN assigned chaaerim Feb 18, 2023

L2HYUNN approved these changes Feb 19, 2023

View reviewed changes

chaaerim added 3 commits February 19, 2023 22:58

feat: jest, react-testing-library setting

bee19d7

chore: paths 수정

3eb7d0b

fix: fix conflict

b99f954

chaaerim force-pushed the feat/test branch from 09943c8 to b99f954 Compare February 19, 2023 14:12

chaaerim merged commit 7878098 into dev Feb 19, 2023

chaaerim deleted the feat/test branch February 19, 2023 14:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: jest, react-testing-library setting #5

feat: jest, react-testing-library setting #5

chaaerim commented Feb 17, 2023

L2HYUNN left a comment

feat: jest, react-testing-library setting #5

feat: jest, react-testing-library setting #5

Conversation

chaaerim commented Feb 17, 2023

🚀 작업 내용

✏️ 상세 설명

📷 스크린샷

📁 참고 자료

L2HYUNN left a comment

Choose a reason for hiding this comment