jest 3rd party library mocking

이슈

authoriztion token정보로 api의 요청을 받아서 화면에 유저정보를 띄우는 마이 페이지가 있다.

테스트를 돌리는데 테스트 환경에서 자꾸 유저정보가 빈값으로 나오는 이슈가 있었다.

 

컴포넌트 구현 

유저정보를 get 해오려면 저장된 토큰정보를 가지고 서버에 요청해서 response로 받아와야한다.

이때, 인증 토큰은 로컬스토리지에서 토큰 정보를 받아오는데, 로컬 스토리지에서 토큰정보를 받아올때 localStorage Web API를 사용해서 localStorage.getItem("token")로 바로 받아오는 것이 아니고, store라는 3rd party 패키지를 통해 스토리지에 접근한다.

 

//package.json

  "dependencies": {
    "store": "2.0.12"
  },

 

따라서, 컴포넌트에서 서버에서 받아온 데이터를 표출하려면, 클라이언트에서 가지고있는 토큰 정보로 (스토리지에서 가져온 토큰으로) 서버에 get 요청시 헤더에 authorization 프로퍼티에 Bearer 토큰정보를 싣어서 보내야한다.

 

외부 store 라이브러리 사용 코드 

서버에 요청보낼때는 query에 위에서 말한것처럼 토큰정보를 싣어서보내는데, 스토리지에서 token 정보를 가져오기 위해 store 패키지의 내부 매서드를 사용해서 가지고 오고, 그 코드는 아래와 같다. 

 

// AuthStorage.ts

import store from 'store';

export function getTokenFromStorage(): string | null {
  return store.get('ACCESS_TOKEN')
    ? (store.get('ACCESS_TOKEN') as string)
    : null;
}

 

테스트코드

그리고 아래와 같이 테스트코드를 실행시키면 아래와 같은 에러가 난다. 

 

import { Route, Routes } from 'react-router-dom';
import { renderWithMemoryRouter, screen, waitFor } from '@/utils/testUtils';

  function renderMyInfo() {
    return renderWithMemoryRouter(
      <Routes>
        <Route path={ROUTES.MY_INFO} element={<MyInfo />} />
      </Routes>,
      {
        initialEntries: [ROUTES.MY_INFO],
      },
    );
  }
  
it('내정보 view 컴포넌트가 표출된다', async () => {
    const { user } = renderMyInfo();
    expect(screen.getByText('내 정보')).toBeInTheDocument();
    expect(screen.getByText('홍길동')).toBeInTheDocument();
    expect(screen.getByText('010 1212 1212')).toBeInTheDocument();
    });
  });

 

TypeError: Cannt read properties of undefined (reading 'get') 

3rd party 라이브러리인 store의 get 메서드를 가져올 수 없다는거다.

 

원인

이렇게 테스트가 외부 환경에 의존성을 가지게되면, 라이브러리에서 리턴하는 결과를 항상 안정적으로 반환할 수 있도록 mocking을 해주어야 문제를 해결할 수 있다. 테스트 코드 입장에서는 앱의 로직을 검증하는게 중요한 것이지, 외부요인 (위 경우에는 실제 스토리지에 저장이 되어있는지, 스토리지에 저장된 값을 실제로 가져오는 것인지 등) 상태를 확인할 필요는 없기 때문에 모킹을 통해 3rd party 라이브러리의 로직은 가짜로 모킹하고 앱이 하고자하는 로직을 테스트 할 수 있다. 

 

해결 

jest의 spyOn 함수를 활용하여 3rd party 모듈을 사용하고 있는 AuthStorage파일 내부 전체를 스파이해온다.

`jest.spyOn(object, methodName)` AuthStorage에서 export하는 함수들을 모두 객체로 가져와 스파이(몰래 정보를 캐오기)해오고 그 내부에서 구현된 함수인 `getTokenFromStorage` 코드를 가져와, 리턴해주는 밸류를 스트링값으로 아무거나 모킹해주어 리턴해준다. 

 

//test.tsx

import * as AuthStorage from '@/components/auth/AuthStorage';

beforeEach(() => {
  jest
    .spyOn(AuthStorage, 'getTokenFromStorage')
    .mockReturnValue('MockAccessToken');
});

 

이렇게 spyOn으로 가짜 토큰값을 모킹해주고 token 값을 가지고 오는 구현부인 baseQuery에서 콘솔에 찍어보면, 테스트환경에서는  `getTokenFromStorage` 함수가 리턴해주는 모킹값이 그대로 잘 찍히는걸 확인할 수 있다.