nextjs mocking (testing library, jest)

로그인페이지에서 로그인 완료시 혹은 로그인되어있는 상태라면 메인페이지로 이동하는 코드를

 

테스트 코드를 공부하면서 작성해봣다.

 

nextjs 의 router push를 이용해서 redirection 해주고 있어서

 

mocking을 

import { useRouter } from 'next/router';

jest.mock('next/rotuer');

const push = jest.fn();
(useRouter as jest.Mock).mockImplementation(() => ({
  push,
}));

위와 같이 해주고 expect(push).toBeCalledWith(1) 테스트가 통과를 하지 못하길래

컨솔을 찍어봐도 내가 원하는 곳까지 다 제대로 콘솔이 잘 찍히는데 왜 테스트가 안되는거지?? 이런 생각하다가

아 useEffect 실행 순서 때문인가 해서 rerender이부분 찾아보고 uselayoutEffect 찾아보고 혹시 side effect 가 있는건가 mockreset 도 해보고 spyOn으로 mocking 해보고 이거 저거 해봤는데 도무지 안되서 밥을 먹고 와서 보니가

 

1.

import router from 'next/router'

router.push('/')

 

2.

import { useRouter } from 'next/router'

const router = useRouter()

router.push('/')

 

router를 이렇게 다른방식으로 사용할수 있는데 

mocking을 위와 같은방식으로 하는건 2처럼 쓸때 이야기이고

 

1번 처럼 쓰는 곳에서는 

import router from 'next/router';

 

jest.mock('next/router, () => ({ push: jest.fn() }));

 

expect(router.push).toBeCalled~ 이렇게 테스트를 해야했다.

 

첫단추를 잘꿰줘야해~~