next/routerを利用しているコンポーネントのテストを行う
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でマークダウンを読み込みテストをする»