Vitest Axios-Mock-Adapter

1. Axios-Mock-Adapter란?

• 단위 테스트 또는 로컬 개발 환경에서 Axios로 만든 HTTP 요청을 제어하기 위한 유틸리티
• 요청을 가로채고 가짜 응답을 반환하므로 실제로 실제 HTTP 요청을 하지 않고도 애플리케이션을 테스트 가능
• 서버 API가 준비되지 않았을때 Mock API를 세팅하여 개발환경에서 사용 가능

❗ 추가적으로 'axios-mock-adapter-path-params' 라는 라이브러리가 존재

• 해당 라이브러리는 파라미터 포함 API Mocking 테스트 가능

2. Axios-Mock-Adapter 기초

2-1. 라이브러리 설치

npm install axios-mock-adapter --save-dev

2-2. 설정 및 기초 사용법

• 테스트가 시작되기 전, Axios Mocking이 이루어져야 하기 때문에 GlobalSetup 설정
  vitest.config.js
  mockStreamStore.js
  - 기존 생성되어 있던 axios 객체를 Mocking
  - onGet : get요청 (기존 Axios 통신 주소와 동일한 주소)
  - reply : 반환 함수 (Response Status Code, 반환 값(Mocking Data))- Mocking 결과
  

3. Axios-Mock-Adapter 사용 예시

3-1. 동적 URL

• 동적으로 변하는 Seq 값에 대한 Mocking → 정규 표현식 사용
  - RegExp : 정규 표현식을 사용하는 객체( * : anything )
  - 정규 표현식 객체를 생성 후 onGet 함수에 객체 입력

3-2. 에러 처리 테스트

• API 통신 에러 발생 시 반환 데이터 Mocking → 에러 시 발생하는 이벤트에 대한 Assertion 테스트 가능

• replyOnce : 1번 요청마다 반환 값 설정 가능
  

• 아래와 같이 3번의 API 요청 시(button 클릭) → 도중에 요청 값이 변환해도 응답에 영향을 미치지 않음
  

• 결과