또한 이 response resolver는 데이터를 주고 받는 기능 외에도 cookie, query parameter, error handling 등의 동적인 데이터를 처리할 수 있는 다재다능한 기능도 갖고 있다.
Cookie
msw에서는 브라우저 단에 저장된 쿠키를 활용할 수 있다.
rest.post('/login', (req, res, ctx) => {
const { authToken } = req.cookies // 쿠키를 꺼내올 수 있다.
if (isValidToken(authToken)) {
return res(
ctx.json({
id: 'abc-123',
firstName: 'John',
}),
)
}
return res(
ctx.status(403),
ctx.json({ message: 'Failed to authenticate!' }),
)
}),이 코드는 /login 경로로의 POST 요청을 가로채고, 요청에 따라 유효한 토큰이 제공된 경우와 제공되지 않은 경우에 대한 응답을 정의하는 예시이다.
Query parameters
가로챈 요청의 쿼리 매개변수에 액세스하려면 req.url의 searchParams 속성을 사용한다.
이 값은 URLSearchParams의 모든 query parameter를 포함한다.
rest.get('/products', (req, res, ctx) => {
const productId = req.url.searchParams.get('id')
return res(
ctx.json({
productId,
}),
)
}),Response patching
모의 응답이 실제 응답을 기반으로 하는 기술이다. 이 기술은 다양한 목적(즉, 실험 또는 디버깅)을 위해 API를 보강하려는 의도로 기존 API로 작업할 때 유용하게 사용할 수 있다.
해당 API는 깃허브에서 본인의 닉네임을 입력하면 깃허브 유저 정보를 제공하는 실제 깃허브 API이다. 해당 url에 본인의 깃허브 닉네임을 입력하여 response 한 json 직접 데이터를 수정하여 console에 찍어보았다.
Mocking error responses
프론트와 백엔드에서 응답 요청을 주고 받을 때, 여러가지 요인으로 인해 에러가 자주 발생하기도 한다. 이렇게 에러가 발생할 때 msw에서 에러 핸들링 함수를 제공한다.
응답을 줄 때, 서버의 상태를 403을 줌으로써 강제로 에러를 발생시킨다.
이후 프론트에서 에러 발생시에 에러를 받아주고, 상황에 따라 유저에게 에러페이지를 보여주거나 재접속을 시도하는 등의 유연한 개발을 진행할 수 있다.
이렇게 프론트를 개발하면서, 데이터 모킹 라이브러리를 사용하여 api 호출을 테스트하면 개발 생산성을 향상시켜주고, 품질 높은 애플리케이션을 개발하는 데에 큰 도움을 준다.
