jest

[Jest] react-query + recoil 적용시 에러

⚠️ 문제 상황 컴포넌트를 테스팅하는 과정에서 queryClient , recoilRoot 에러 발생 ERROR 1 : No QueryClient set, use QueryClientProvider to set one 에러난 코드는 다음과 같다. // _app.tsx ... return ( ) // Calendar.test.tsx import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { MainCalendar } from '@/components/project-main/Calendar'; import { renderWithQueryClient } fr..

[테스팅 초기 설정] Jest + yarn-berry + Nextjs + Recoil + TypeScript

[아코하] 프로젝트에서 Jest를 적용하기 위해 세팅이다. 프로젝트 환경 - yarn-berry 3.3.1 - Next.js 13.1.2 - Recoil 0.7.6 - TypeScript 4.9.4 - Jest 29.5.0 1. 프로젝트 시작 & 관련 모듈 설치 yarn create next-app --typescript CNA를 TypeScript 로 설치해주고, yarn add -D jest @types/jest jest-environment-jsdom ts-jest babel-jest Jest 와 관련 라이브러리도 설치해준다. - jest : 단위테스트에 적합한 테스팅 라이브러리 - jest-environment-jsdom : Jest 28 버전 이후부터는 테스팅환경을 jsdom이 아니라 이 패키지..

테스팅 그게 뭐죠? (feat. Jest, react-testing-library)

이번에 리액트 컴포넌트 테스팅에 대해 공부하면서 알게된 내용들을 정리해보려 한다. 코드 테스트가 필요한 경우 코드 작성 후 원하는대로 동작하는지 확인할 때 버그 발생 시, 어떤 상황에서 버그가 발생하는지 알기위해 (ex array가 empty일때만 버그일경우) 코드 리팩토링 후 제대로 동작하는지 확인할 때 테스팅 장점 미연에 에러 방지 가능 TDD(Test Driven Development) 등의 방법론을 적용해서 생산성을 향상시킬수있음 무조건 실패하는 케이스를 미리 작성하고, 이걸 하나씩 success시켜가면서 완성시키는 코드 작성 방법 테스트가 늘어나면서 테스트 코드 자체가 구현 코드에 대한 문서가 됨 테스트가 용이하게 코드를 작성하므로써 코드 품질과 코드의 신뢰성을 높힌다.(단위별로 나눠 작성) -..