[Error] Next Router was not mounted 해결

NextRouter was not mounted

에러는 Next.js의 useRouter 훅이 테스트 환경에서 실제 라우터로 대체되지 않아 발생합니다.

저는 테스트 환경에서 Next.js 라우터의 Mock (가상으로 결과만 부여)을 구성하여 문제를 해결하였습니다

 

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { useRouter } from 'next/router';


jest.mock('next/router', () => ({
  useRouter: () => ({
    basePath: '',
    pathname: '/',
    route: '/',
    asPath: '/',
    query: {},
    push: jest.fn(),
    replace: jest.fn(),
    reload: jest.fn(),
    back: jest.fn(),
    prefetch: jest.fn(),
    beforePopState: jest.fn(),
    events: {
      on: jest.fn(),
      off: jest.fn(),
      emit: jest.fn(),
    },
    isFallback: false,
    isReady: true,
    isPreview: false,
    isLocaleDomain: false,
    dynamicRoutes: [],
  }),
}));

describe('컴포넌트', () => {
  // 기존 테스트 코드를 그대로 사용하세요.
});

 

 

상세히 설명하자면 

1.jest.mock('next/router', () => ({...}): next/router 모듈을 모킹하고, 이를 대체할 객체를 정의합니다.

2.useRouter: () => ({...}): 모킹된 객체에서 useRouter 함수를 정의하고, 이 함수가 반환할 객체를 설정합니다.

3.basePath, pathname, route, asPath: 현재 라우트의 기본 경로, 경로 이름, 라우트, 실제 경로를 나타내는 문자열입니다. 테스트 환경에서는 실제 값이 필요하지 않으므로 빈 문자열이나 '/'로 설정했습니다.

4.query: 현재 라우트에 대한 쿼리 객체입니다. 테스트 환경에서는 빈 객체로 설정했습니다.

5.push, replace, reload, back, prefetch, beforePopState: 라우팅과 관련된 함수들입니다. 이 함수들은 테스트 환경에서 호출되는지 확인하기 위해 jest.fn()으로 모킹되었습니다.

6.events: 라우터 이벤트와 관련된 함수들을 포함하는 객체입니다. on, off, emit 함수들은 테스트 환경에서 호출되는지 확인하기 위해 jest.fn()으로 모킹되었습니다.

7.isFallback, isReady, isPreview, isLocaleDomain: 현재 라우터의 상태를 나타내는 불리언 값들입니다. 테스트 환경에서는 각각 false, true, false, false로 설정했습니다.

8.dynamicRoutes: 동적 라우팅 정보를 포함하는 배열입니다. 테스트 환경에서는 빈 배열로 설정했습니다.
이렇게 설정된 모킹 객체를 사용하면 테스트 환경에서 useRouter 훅이 실제 라우터와 동일한 동작을 수행할 수 있게 됩니다.