next/routerを利用しているコンポーネントのテストを行う

Next

next/routerを利用しているコンポーネントを単体でテストする場合にはNext Routerのモックを事前に作成しておく必要があります。

以下のようにnext/routerを利用している場合に

import { useRouter } from 'next/router';
export const Component = () => {
  const router = useRouter();
  return (<h1>{router.pathname}</h1>)
}

次のようなtestを書くと、router.pathnameがundefindになるとエラーになってしまいます。

import React from 'react';
import { render, screen } from '@testing-library/react';
  
import Component from './Component';
  
describe('Component', () => {
  it('should render', () => {
    const { asFragment } = render(<Component />);
    expect(asFragment()).toMatchInlineSnapshot()
  });
});

その場合は事前にnext/routerにjest.mockでルーター情報を指定してあげることで、その情報をもとにテストが実行されるようになります。

import React from 'react';
import { render, screen } from '@testing-library/react';
  
jest.mock('next/router', () => ({
  useRouter() {
    return {
      route: '/',
      pathname: '/',
      query: '',
      asPath: '',
    };
  },
}));
  
import Component from './Component';
  
describe('Component', () => {
  it('should render', () => {
    const { asFragment } = render(<Component />);
    expect(asFragment()).toMatchInlineSnapshot()
  });
});

スポンサードリンク

«Github Actionsのキャッシュ機能を利用してNext.jsのデプロイを高速化 | メイン | Jestでマークダウンを読み込みテストをする»