[Error] `NextRouter` was not mounted 에러 해결하기 / jest와 next router 사용 시 next-router-mock 를 사용해보자!

 

 

프론트엔드에서 처음으로 돌려보는 테스트 코드..!

테스트 코드를 쓰고 실행해보니 `NextRouter` was not mounted 에러와 함께 바로 에러가 남.

 

Next 공식 문서에서는 아래와 같이 해당 에러를 소개하고 있었다. 

Why This Error Occurred

A component used useRouter outside a Next.js application, or was rendered outside a Next.js application. This can happen when doing unit testing on components that use the useRouter hook as they are not configured with Next.js' contexts.

This can also happen when you try to use the useRouter hook from next/router inside the app directory, as the App Router's useRouter from next/navigation has different behavior to the useRouter hook in pages.

`NextRouter` was not mounted

 

읽어보니 이 에러는 컴포넌트가 Next 어플리케이션 밖에서 useRouter 를 사용하고 있거나, Next 어플리케이션 밖에서 렌더링되어서 발생하는 에러라는 것이다. useRouter를 사용하는 컴포넌트에 대해 unit 테스팅을 할 때 발생할 수 있다고 명시되어있다. (내 상황..) 

 

 

문서에서는 친절하게  해결 방안도 제시해주고 있는데 useRouter 훅을 test 내에서 mocking 하라는 것이다. 

 

이를 위한 라이브러리가 있는데 next-router-mock 이다.

 

아래 명령어로 (또는 npm i next-router-mock) 설치를 해준후 

yarn add next-router-mock

테스트 파일 상단에 아래와 같이 next/router 를 mock 해주면 테스트가 정상적으로 돌아 간다! 

jest.mock('next/router', () => require('next-router-mock'));

 

 

끝   .

 

 

https://www.npmjs.com/package/next-router-mock

next-router-mock