> [!date] published: 2025-06-10
## invariant expected app router to be mounted
- [next.js - Error: invariant expected app router to be mounted why this happened when using react testing library - Stack Overflow](https://stackoverflow.com/q/76858797)
페이지 하위의 `NoticeList` 라는 컴포넌트에서 `'next/navigation'` 의 `useRouter`를 사용중이었다. 모킹해주기.
```ts
jest.mock("next/navigation", () => ({
useRouter: () => ({
push: jest.fn(),
}),
}));
```
### 왜 `jest.mock()`으로 모킹하는가
Next.js의 `useRouter`는 테스트 대상 컴포넌트 안에서 호출되는 훅이다. 테스트에서는 이 훅이 반환하는 router 객체의 `push`, `pathname`, `query` 같은 값을 직접 제어해야 하는 경우가 많다.
예를 들어 아래처럼 `next/router` 모듈을 import한 뒤 `useRouter`에 spy를 거는 방식도 생각할 수 있다.
```ts
import * as nextRouter from "next/router";
jest.spyOn(nextRouter, "useRouter").mockReturnValue({
push: jest.fn(),
});
```
하지만 이 경우 테스트 환경, 모듈 시스템, 타입 설정에 따라 모킹이 의도대로 동작하지 않거나 테스트 간 간섭이 생길 수 있다.
따라서 React Testing Library에서 Next.js router 훅 때문에 에러가 난 상황이라면, router 훅이 들어 있는 모듈을 `jest.mock()`으로 대체하고 필요한 반환값만 명시하는 쪽이 더 예측하기 쉽다.
`jest.mock()`과 `jest.spyOn()`의 일반적인 선택 기준은 [[Jest Mock]]에서 확인하기.