Next.js の Jest / React Testing Library でモック (mock) を含めた render で開発効率を高めよう

はじめに

バージョン情報

• Node.js：15.11.0
• React：17.0.2
• Next.js：10.2.2
• Jest：26.6.3
• React Testing Library
  • @testing-library/react：11.2.5

Router を使用した際の問題点

next/router

// src/pages/sample.tsx

import { useRouter } from 'next/router';

export default function Sample(): JSX.Element {
  const router = useRouter();
  const path = router.asPath;

  return <h1>このページの path は {path} です。</h1>;
}

テスト時にエラーへ遭遇

// __test__/sample.test.tsx

import { render } from '@testing-library/react';

import Sample from 'pages/sample';

describe('初期表示の確認', () => {
  test('サンプルページ', () => {
    const { asFragment } = render(<Sample />);
    expect(asFragment()).toMatchSnapshot();
  });
});

# テストの実行
yarn test __test__/sample.test.tsx

# 表示されるエラーを抜粋
初期表示の確認
    ✕ サンプルページ (29 ms)

  ● 初期表示の確認 › サンプルページ

    TypeError: Cannot read property 'asPath' of null

      3 | export default function Sample(): JSX.Element {
      4 |   const router = useRouter();
    > 5 |   const path = router.asPath;
        |                       ^
      6 |
      7 |   return <h1>このページの path は {path} です。</h1>;
      8 | }
...
```

Router 使用時の解決策

Router 機能をモック

モックオブジェクト（Mock Object）とは、ソフトウェアテスト時、特にテスト駆動開発、ビヘイビア駆動開発における代用の下位モジュールスタブの一種。スタブと比較して、検査対象のモジュールがその下位モジュールを正しく利用しているかどうかを検証するのに使われる。引用先

// __test__/sample.test.tsx

import { render } from '@testing-library/react';

import Sample from 'pages/sample';

// モック用に追記
jest.mock('next/router', () => ({
  useRouter() {
    return {
      asPath: '/',
    };
  },
}));

describe('初期表示の確認', () => {
  test('サンプルページ', () => {
    const { asFragment } = render(<Sample />);
    expect(asFragment()).toMatchSnapshot();
  });
});

# テストの実行
yarn test __test__/sample.test.tsx

 PASS  __test__/sample.test.tsx
  初期表示の確認
    ✓ サンプルページ (11 ms)

 › 1 snapshot written.
...

Router の他の機能もモック

// __test__/sample.test.tsx

import { render } from '@testing-library/react';

import Sample from 'pages/sample';

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

describe('初期表示の確認', () => {
  test('サンプルページ', () => {
    const { asFragment } = render(<Sample />);
    expect(asFragment()).toMatchSnapshot();
  });
});

# テストの実行
yarn test __test__/sample.test.tsx

 PASS  __test__/sample.test.tsx
  初期表示の確認
    ✓ サンプルページ (12 ms)

 › 1 snapshot written.
...

モック機能を持った render を作成

// __test__/utils.ts

import Queries from '@testing-library/dom/types/queries';
import { render as defaultRender, RenderResult } from '@testing-library/react';
// import { RouterContext } from 'next/dist/next-server/lib/router-context';
import { RouterContext } from 'next/dist/shared/lib/router-context';
import { NextRouter } from 'next/router';
import React from 'react';

export function render(children: React.ReactElement): RenderResult<typeof Queries, HTMLElement> {
  const mockRouter: NextRouter = {
    route: '/',
    pathname: '/',
    query: {},
    asPath: '/',
    basePath: '/',
    isLocaleDomain: true,
    isReady: true,
    push: jest.fn(),
    prefetch: jest.fn(),
    replace: jest.fn(),
    reload: jest.fn(),
    back: jest.fn(),
    beforePopState: jest.fn(),
    events: {
      on: jest.fn(),
      off: jest.fn(),
      emit: jest.fn(),
    },
    isFallback: false,
    isPreview: false,
  };

  return defaultRender(
    <RouterContext.Provider value={mockRouter}>{children}</RouterContext.Provider>,
  );
}

// __test__/sample.test.tsx

// React Testing Library の render はコメントアウト
// import { render } from '@testing-library/react';

import Sample from 'pages/sample';
// 新たに定義したカスタマイズ render を使用
import { render } from './lib/utils';

describe('初期表示の確認', () => {
  test('サンプルページ', () => {
    const { asFragment } = render(<Sample />);
    expect(asFragment()).toMatchSnapshot();
  });
});

# テストの実行
yarn test __test__/sample.test.tsx

 PASS  __test__/sample.test.tsx
  初期表示の確認
    ✓ サンプルページ (12 ms)

 › 1 snapshot written.
...

おわりに