Open10

Jest Mock 集

seyaseya

Notification

こんな感じで生やして

globalThis.Notification = {
  requestPermission: jest.fn(),
  permission: 'granted',
} as unknown as jest.Mocked<typeof Notification>;

// テストで権限のステータス変えたい時はこんな感じでご利用ください。
// Notification.permission
// jest
//   .spyOn(window.Notification, "permission", "get")
//   .mockReturnValue("denied");

// // Notification.requestPermission (which is a Promise)
// jest
//   .spyOn(window.Notification, "requestPermission")
//   .mockResolvedValueOnce("granted");

これで読み込む

setupFiles: [
    "<rootDir>/__mocks__/Notification.ts",
  ],
seyaseya

API リクエスト

鉄板である msw を使う
https://mswjs.io/

こんな感じの関数を用意して

import type { RequestHandler } from 'msw';
import { setupServer } from 'msw/node';

export function setupMockServer(...handlers: RequestHandler[]) {
  const server = setupServer(...handlers);
  beforeAll(() => server.listen());
  afterEach(() => server.resetHandlers());
  afterAll(() => server.close());
  return server;
}

テストファイルの先頭で読み込む

const server = setupMockServer(...handlers);

handler は私はこんな感じのスクリプトで生成してる
https://github.com/kazuyaseki/openapi-to-msw

テスト毎に返す値を変えたい場合はこんな感じ

server.use(
        rest.get('/hoge/', (req, res, ctx) => {
          return res(
            ctx.json({
              fuga: 0,
            })
          );
        })
      );

ステータス変えたい場合はこんな感じ

server.use(
        rest.get('/me/', (req, res, ctx) => {
          return res(ctx.status(403));
        })
      );

参考

https://zenn.dev/takepepe/articles/testing-gssp-and-api-routes#2.msw-handler-factory-関数

seyaseya

Next.js の useRouter

jest.mock('next/router', () => ({
  useRouter() {
    return {
      route: '/home',
    };
  },
}));

const useRouter = jest.spyOn(require('next/router'), 'useRouter');

useRouter.mockImplementation(() => ({
        route: '/home',
      }));
seyaseya

いい記事

色々なテスト事例
setTimeout を使うコンポーネントのテスト
補足: Storybook の story を使ったテスト
補足: userEvent の setup について
補足: getBy queryBy findBy の違いについて
現在の日付を表示するコンポーネントのテスト
useEffect のクリーンアップを確認するテスト
window.location.hash を扱うテスト
キーボード操作のテスト
補足: jest-dom を使って DOM の状態を確認する
Fetch API が含まれる実装のテスト
補足: Jest のマニュアルモックについて
ローディングが表示されているかどうかを確認するテスト
補足: jest.fn と jest.spyOn の違い

https://blog.cybozu.io/entry/2022/08/29/110000#setTimeout-を使うコンポーネントのテスト