[테스트] MSW로 쿠키 모킹하기

프로젝트에서 쿠키+세션 방식으로 비회원 로그인을 구현하였고, 이를 MSW로 어떻게 모킹했는지와 관련하여 포스팅했다.

Fetch API 응답 인스턴스를 사용하여 응답 쿠키를 모킹하는 것은 Cookie 헤더가 설정할 수 없는 ' Forbidden Header(금지된 헤더)' 중 하나이기 때문에 문제가 된다. MSW는 응답의 무결성과 보안을 손상시키지 않으면서 응답 쿠키를 모킹할 수 있도록 HttpResponse 클래스에서 이러한 제한을 우회하는 방법을 제공한다.

응답 모킹하기

기본적으로 쿠키의 정보는 키=값 을 ; 로 구분하여 담아주며, 실제 담을 정보는 앞 쪽에 HttpOnly와 같은 부가 정보는 뒤쪽에 작성한다.

공식문서의 예제는 다음과 같다.

http.post('/login', () => {
  return new HttpResponse(null, {
    headers: {
      // Setting the "Set-Cookie" header on the mocked response
      // will set the cookies on the `document` as if they were
      // received from the server.
      'set-cookie': 'authToken=abc',
    },
  })
})

export const userHandlers = [
  // 비회원 로그인 API
  http.post("/api/v1/users/guest-login", () => {
    const sessionId = Math.random().toString(36).substring(2, 15).toUpperCase();

    return HttpResponse.json(
      {
        timeStamp: new Date().toISOString(),
        code: "SUCCESS",
        message: "요청이 성공적으로 처리되었습니다.",
        result: {
          userId: generateRandomUserId(),
          nickname: generateRandomNickname(),
        },
      },
      {
        status: 200,
        headers: {
          "set-cookie": `JSESSIONID=${sessionId}; path=/; httpOnly; sameSite=Lax`,
        },
      },
    );
  }),
];

실제로 위와 같이 하나하나 옵션을 지정하기 불편하다. 따라서 쿠키 읽기/쓰기를 편리하게 할 수 있게 하는 유명한 라이브러리인 npm cookie를 사용하는 것을 권장한다.

브라우저 Applications 탭의 Cookies 확인해보자.

요청 가로채기

쿠키에 특정 데이터가 있는 지 확인하기 위해 요청을 가로챌 수 있다. 응답 resolver의 파라미터에서 제공된 cookie 를 통해 요청의 쿠키를 읽을 수 있다. request.headers.get('cookie')를 직접 읽을 수도 있지만 편의를 위해 제공된다.

http.get('/api/user', ({ cookies }) => {
  if (!cookies.authToken) {
    return new HttpResponse(null, { status: 403 })
  }
 
  return HttpResponse.json({ name: 'John' })
})

사실, 작업 중에 MSW의 쿠키가 해당 탭에서 잘 안나타거나 예전 값이 반환되는 경우가 많았다. 아직 이유는 모르겠지만 개발 서버를 다시 실행해주면 어느정도 해결 가능했다.

참고자료
MSW 공식문서 - Mocking HTTP
MSW 공식문서 - Intercepting requests