본문 바로가기

Frontend/TDD

msw와 vitest에 대해서 알아보자 저번에 올린 TDD 관련 글에서 msw와 vitest를 이용해서 테스트 코드를 작성해본다고 했다. 이때, 많고 많은 라이브러리들 중 왜 msw와 vitest를 사용하는지에 대해서 먼저 알아보도록 하자. vitest 먼저 vitest부터 알아보자. 이름부터 vite와 되게 비슷하게 생겼는데, vitest는 vite 환경으로 테스트를 진행할 수 있도록 도와주는 프레임워크라고 한다. 이전에 vite 관련 글을 올린 적이 있었는데, 이제는 CRA보다 vite를 사용해서 리액트 프로젝트를 만드는 것이 대세인 것 같다. 나도 Next.js를 쓰지 않는다면 한동안은 vite를 활용해서 프로젝트 세팅을 할 예정이라 vitest를 테스트 프레임워크로 정하게 되었다. msw 이제 msw에 대해서 알아보자. msw는 moc.. 더보기
프론트엔드도 TDD? TDD TDD는 Test Driven Development로, 테스트 주도 개발이다. 작은 단위의 테스트 케이스를 작성하고 테스트를 통과하는 코드를 점점 추가시키면서 코드를 짜는 것이다. 테스트 코드 이제 그러면 테스트 코드가 뭔지 궁금할 수 있다. 테스트 코드는 말 그대로 작성한 코드를 실행하고 예상된 결과가 나오는지 확인하는 데 사용하는 코드이다. 테스트 코드에는 여러 종류가 있다. (정적 테스트, )유닛 테스트, 통합 테스트, e2e 테스트가 있는데, 왜 이렇게 구분 지어 놓았을지 궁금할 수 있다. 이 테스트들은 다 테스트 대상의 범위가 다 다르다. 먼저 가장 낮은 단계의 정적 테스트부터 알아보자. 프론트엔드 개발자라면 다 아는 테스트일 것이다. 테스트 도구는 typescript와 eslint인데,.. 더보기