NextJSでreact-testing-library、Jestを利用する

import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { getPage, initTestHelpers } from 'next-page-tester';

initTestHelpers();

describe('Navigation by Link', () => {
  it('Should selected link page navigations', async () => {
    // 1. ページを取得
    const { page } = await getPage({
      route: '/index',
    });
    // 2. ページをレンダリング
    render(page);
    // 3. ユーザーイベント発生（data-testid = 'a-nav'のLinkコンポーネントをクリック）
    await waitFor(() => userEvent.click(screen.getByTestId('a-nav')));
    // 4. 期待する動作（上記リンク先のページに「A Page」という文字がある）
    expect(await screen.findByText('A Page')).toBeInTheDocument();

    await waitFor(() => userEvent.click(screen.getByTestId('b-nav')));
    expect(await screen.findByText('B Page')).toBeInTheDocument();
		
		screen.debug(); // 必要に応じて
  });
});

import { render, screen, cleanup } from '@testing-library/react';
import { getPage } from 'next-page-tester';
import { initTestHelpers } from 'next-page-tester';
import { rest } from 'msw';
import { setupServer } from 'msw/node';

initTestHelpers();

// 1. apiを叩いた時のレスポンスデータを定義
const handlers = [
  rest.get('https://jsonplaceholder.typicode.com/posts/', (req, res, ctx) => {
    const _limit = req.url.searchParams.get('_limit');
    if (_limit === '10') {
      return res(
        ctx.status(200),
        ctx.json([
          {
            id: 1,
            title: 'dummy title 1',
            body: 'dummy body 1',
            userId: 1,
          },
          {
            id: 2,
            title: 'dummy title 2',
            body: 'dummy body 2',
            userId: 2,
          },
        ])
      );
    }
  }),
];

// 2. モックサーバー連携
// 2-1. 設置
const server = setupServer(...handlers);
// 2-2. 起動
beforeAll(() => server.listen());
// 2-3. テストケースごとに副作用が起こらないように都度初期化
afterEach(() => {
  server.resetHandlers();
  cleanup();
});
// 2-4. 切断
afterAll(() => server.close());

describe('Blog Page', () => {
  it('Should render the list of blogs pre-fetched by SSG', async () => {
    const { page } = await getPage({
      route: '/blog-page',
    });

    render(page); // 構造の取得

    expect(await screen.findByText('Blog Page')).toBeInTheDocument();
    expect(screen.getByText('dummy title 1')).toBeInTheDocument();
    expect(screen.getByText('dummy title 2')).toBeInTheDocument();
  });
});

import { render, screen, cleanup } from '@testing-library/react';
import { getPage } from 'next-page-tester';
import { initTestHelpers } from 'next-page-tester';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
import userEvent from '@testing-library/user-event';

initTestHelpers();

const handlers = [
  rest.get('https://jsonplaceholder.typicode.com/posts/', (req, res, ctx) => {
    const _limit = req.url.searchParams.get('_limit');
    if (_limit === '10') {
      return res(
        ctx.status(200),
        ctx.json([
          {
            id: 1,
            title: 'dummy title 1',
            body: 'dummy body 1',
            userId: 1,
          },
          {
            id: 2,
            title: 'dummy title 2',
            body: 'dummy body 2',
            userId: 2,
          },
        ])
      );
    }
  }),
  rest.get('https://jsonplaceholder.typicode.com/posts/1', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json({
        id: 1,
        title: 'dummy title 1',
        body: 'dummy body 1',
        userId: 1,
      })
    );
  }),
];

const server = setupServer(...handlers);
beforeAll(() => server.listen());
afterEach(() => {
  server.resetHandlers();
  cleanup();
});
afterAll(() => server.close());

describe('Blog detail page', () => {
  it('Should render detail content of id=1', async () => {
    const { page } = await getPage({
      route: '/posts/1',
    });

    render(page);

    // 初めにコンテンツの取得するまでawaitをかける
    // findはPromiseを返す
    expect(await screen.findByText('dummy title 1')).toBeInTheDocument();
    expect(screen.getByText('dummy body 1')).toBeInTheDocument();
  });

  it('Should route back top-page from blog detail page', async () => {
    const { page } = await getPage({
      route: '/posts/1',
    });

    render(page);
    // コンテンツを取得できるまで待つ
    await screen.findByText('dummy title 1');
    // クリックイベントを発火
    userEvent.click(screen.getByTestId('back-blog'));

    // イベント発火後なのでawaitかける
    expect(await screen.findByText('Blog Page')).toBeInTheDocument();
  });
});