호박너구리 블로그

오늘은 NextJS 프로젝트에 유닛테스트를 위해 Jest와 react-testing-library를 설치해보려고 합니다! ※ 유닛테스트, Jest, react-testing-library 가 무엇인지, 그냥 React에서 어떻게 사용하는지 궁금하다면 이전 글을 참조해주세요! 1. Jest 설치하기 우선 jest를 설치합니다. yarn add jest // or npm install jest ※ 타입스크립트를 사용하신다면 코드 에디터의 지원을 받기 위해 @types/jest 를 설치하시는 것을 추천합니다. yarn add --dev @types/jest 만약 이후 바로 테스트를 추가한다면 ES6 이상의 문법이나 typescript는 사용하지 못할 것입니다. 왜냐하면 jest가 commonJS 기반으로 작동..

개발 2021. 5. 21. 13:51

이전 글에서 jest와 react-testing-library를 통해 react 유닛 테스트 하는 법을 살펴봤습니다. 그런데 toMatchSnapshot 테스트를 통해 컴포넌트 테스트를 하는 경우 한 가지가 아쉬웠는데요, 바로 snapshot 파일이 생성되는 경로였습니다. 그래서 저는 컴포넌트 위치에 스냅샷 파일이 생기는 것이 파일구조를 복잡하게 만드는 것 같아서 따로 모아두고 싶었습니다. 한 번 어떻게 경로를 바꿀 수 있는지 살펴볼게요! 1. snapshot 파일 모아둘 경로 생성 일단 루트 디렉토리에 관련된 파일을 전부 담아둘 tests라는 폴더를 만들었습니다. 그리고 그 안에 snapshot 파일을 모아두기 위한 __snapshots__ 라는 폴더도 생성할게요. 2. jest.config.js 설정..

개발 2021. 5. 21. 13:49

최근들어 TDD (test-driven development, 테스트 주도 개발) 라는 말이 더 자주 들리는 것 같습니다. 실패하는 테스트 코드를 만들어놓고, 그 테스트를 통과하는 진짜 코드를 작성하고, 수정할 것이 있으면 리팩토링하는 방식인데요. 그렇게 하면 작은 기능 단위로 개발하게 되기 떄문에 깔끔하고 좋은 코드를 유지할 수 있게 됩니다. 1. 테스트의 종류: 유닛 테스트란? 프론트엔드 테스트는 크게 세 가지 종류가 있습니다. E2E(End to End) 테스트는 프로젝트가 브라우저 위에서 제대로 작동하는지 사용자 관점에서 테스트하는 방법입니다. 보통 셀레니움(Selenium)이나 퍼페티어(Puppeteer) 등을 사용합니다. 통합(Integration) 테스트는 기능 단위로 묶어서 테스트하는 방법..

개발 2021. 5. 21. 11:10