Open10
Jest Mock 集
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",
],
localStorage
これ使った
API リクエスト
鉄板である msw を使う
こんな感じの関数を用意して
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 は私はこんな感じのスクリプトで生成してる
テスト毎に返す値を変えたい場合はこんな感じ
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));
})
);
参考
jest の mock と spyOn
Next.js の useRouter
jest.mock('next/router', () => ({
useRouter() {
return {
route: '/home',
};
},
}));
const useRouter = jest.spyOn(require('next/router'), 'useRouter');
useRouter.mockImplementation(() => ({
route: '/home',
}));
location
これ使った
いい記事
色々なテスト事例
setTimeout を使うコンポーネントのテスト
補足: Storybook の story を使ったテスト
補足: userEvent の setup について
補足: getBy queryBy findBy の違いについて
現在の日付を表示するコンポーネントのテスト
useEffect のクリーンアップを確認するテスト
window.location.hash を扱うテスト
キーボード操作のテスト
補足: jest-dom を使って DOM の状態を確認する
Fetch API が含まれる実装のテスト
補足: Jest のマニュアルモックについて
ローディングが表示されているかどうかを確認するテスト
補足: jest.fn と jest.spyOn の違い
Canvas