저번에 올린 TDD 관련 글에서 msw와 vitest를 이용해서 테스트 코드를 작성해본다고 했다.
이때, 많고 많은 라이브러리들 중 왜 msw와 vitest를 사용하는지에 대해서 먼저 알아보도록 하자.
vitest
먼저 vitest부터 알아보자.
이름부터 vite와 되게 비슷하게 생겼는데, vitest는 vite 환경으로 테스트를 진행할 수 있도록 도와주는 프레임워크라고 한다.
이전에 vite 관련 글을 올린 적이 있었는데, 이제는 CRA보다 vite를 사용해서 리액트 프로젝트를 만드는 것이 대세인 것 같다.
나도 Next.js를 쓰지 않는다면 한동안은 vite를 활용해서 프로젝트 세팅을 할 예정이라 vitest를 테스트 프레임워크로 정하게 되었다.
msw
이제 msw에 대해서 알아보자.
msw는 mock service worker의 약자이다.
mocking api 없이 프론트엔드 개발을 하게 되면 백엔드 개발자분들이 만들어주시는 api가 다 나온 후 개발을 진행하게 된다.
이렇게 되면 프론트엔드 개발팀은 테스트를 해볼 시간도 줄어들게 되고 백엔드 api가 나올 때까지 개발을 못하고 대기만 해야하는 상황이 자주 발생한다.
이런 비효율적인 상황들에 대한 대비책으로 mocking api를 가져오게 된 것이다.
mocking api는 실제로 rest api가 구축되어 있지 않아도 있는 것처럼 테스트 환경을 만들어주는 것이다.
그런데 우리가 작성할 테스트 코드에서 왜 mocking api가 필요할까?
msw와 같은 mocking api를 사용하게 되면 백엔드 서버에 의존하지 않고 프론트엔드 코드를 테스트할 수 있다.
또, 서버가 다운되거나 변경되더라도 테스트는 계속해서 실행될 수 있고, 테스트를 일관적으로 실행시키고 결과를 얻을 수 있기 때문에 많이들 사용한다.
그래서 msw에 대해서 좀 더 알아보자면, msw는 service worker를 이용해서 서버를 향한 실제 네트워크 요청을 가로채서 모의 응답을 보내주는 api mocking 라이브러리라고 생각하면 된다.
service worker는 웹 서비스와 브라우저, 네트워크 사이에서 프록시 서버 역할을 한다.
또, 오프라인에서도 해당 서비스를 사용할 수 있다.
네트워크 중간에서 연결을 가로채고 조작하는 기능 때문에 https가 보장된 환경에서 service worker를 사용할 수 있게 된다.
msw를 이용하면 axios, react-query와 같이 모든 종류의 네트워크 라이브러리를 쓸 수 있고, 직접 mock 서버를 구현하지 않아도 네트워크 수준에서 api를 mocking할 수 있다.
그래서 msw를 사용하기로 결정했다.
msw 동작 방식
msw 라이브러리를 설치하면 브라우저에 service worker를 등록한다.
그러고 나면 브라우저에서 이루어지는 네트워크 요청들을 service worker가 가로채서 클라이언트 사이드에 있는 msw 라이브러리로 보낸다.
이후, 등록된 핸들러를 통해서 모의 응답을 제공받고, 해당 응답을 service worker, 브라우저에 그대로 전달하게 된다.
아래 그림은 위 동작 방식을 단순화한 msw 다이어그램이다.
다음 글
다음 글에서는 msw를 이용해서 어떻게 api를 mocking하는지 코드를 작성하면서 알아보도록 하자.
참고 자료
'Frontend > TDD' 카테고리의 다른 글
| 프론트엔드도 TDD? (9) | 2023.11.08 |
|---|
