storybook은 작성한 리액트 컴포넌트를 독립적으로 개발하고, 관리하고 테스팅하며, 문서화 할 수 있게 해줍니다. 쉽게 생각하면 현재 작성하고 있는 프로젝트의 Button 컴포넌트를 부트스트랩 공식 문서처럼 누구나 컴포넌트의 코드, 외형을 파악하고 문서화해서 관리하게 해줍니다. 때문에 협업에서 뛰어난 효율성을 가집니다. 아쉬운 점은 높은 러닝 커브와 모듈이 자주 충돌하는 번잡한 환경 설정이 있었습니다. 최신 버전에는 Interaction Tests로 실제로 테스팅 과정에서 개발자가 직접 button을 누르거나 input을 입력하면서 테스팅할 필요가 없이 jest, testing-library 함수를 자동으로 상호작용해서 테스팅해줍니다. 예전에는 콘솔로만 확인했던 테스트가 아닌 화면에 상호작용해주면서 ..
오늘 글에서는 React Query hooks를 테스팅하고 해당 hooks를 사용하는 컴포넌트까지 테스팅 해보려 합니다. 프로젝트 준비 테스팅을 위해 필요한 라이브러리를 설치해보겠습니다. yarn add @tanstack/react-query axios yarn add -D jest jest-environment-jsdom msw @testing-library/react @testing-library/jest-dom npx msw init public/ 라이브러리 설치 후, 아래 명령어를 입력해주시면 자동으로 public 폴더에 mockServiceWorker.js 파일이 생성됩니다. // pages/_app.tsx import { QueryClient, QueryClientProvider } from ..
TDD 개발 방식에 대해서 들어보셨나요? 리액트를 개발할 때 보통 컴포넌트 부터 작성하지만 TDD는 '테스팅 코드 작성' -> '컴포넌트 코드 작성' -> '코드 리팩토링' 순으로 개발 절차가 이루어집니다. 이 테스팅 절차를 편리하게 해주는 라이브러리가 있습니다. 요즘 웹 테스팅하면 바로 떠오르는 라이브러리는 Kent C. Dodds라는 개발자분이 만드신 @testing-library가 아닐까 합니다. 실행 환경 설정 yarn add -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event 이번 글에서 쓰일 라이브러리들입니다. jest는 가장 널리쓰이는 필수적인 테스트 ..
