Slide 22
Slide 22 text
import '@testing-library/jest-dom';
import { setProjectAnnotations } from '@storybook/nextjs';
import { createRouter } from '@storybook/nextjs/router.mock';
import mockRouter from 'next-router-mock';
import previewAnnotations from '../../../.storybook/preview';
import { getServer } from '../msw/node';
// https://github.com/scottrippey/next-router-mock?tab=readme-ov-
file#jest-configuration
jest.mock('next/router', () => require('next-router-mock'));
// https://zenn.dev/mitate_gengaku/articles/jest-with-react-markdown-and-
remark-gfm
jest.mock('react-markdown', () => {
return {
__esModule: true,
default: (props: { readonly children: unknown }) => {
return props.children;
},
};
});
jest.mock('remark-gfm', () => {
return {
__esModule: true,
default: () => void 0,
};
});
// https://github.com/vercel/next.js/discussions/
32325#discussioncomment-3164774
jest.mock('next/image', () => ({
__esModule: true,
// eslint-disable-next-line
default: (props: any) => ![]()
,
}));
// NOTE:
// jest-js-dom env does not have some functions. Here're mock
implmentation of them.
global.ResizeObserver = jest.fn().mockImplementation(
() =>
({
observe: jest.fn(),
disconnect: jest.fn(),
unobserve: jest.fn(),
}) satisfies ResizeObserver,
);
global.scrollTo = jest.fn(() => null);
// Note:
// ref: https://storybook.js.org/docs/api/portable-stories/portable-
stories-jest#setprojectannotations
const annotations = setProjectAnnotations([previewAnnotations]);
beforeAll(() => {
getServer().listen();
annotations.beforeAll();
});
beforeEach(() => {
getServer().resetHandlers();
// Init on each case because Next.js Router mock is implemented as
singleton
mockRouter.push('/');
createRouter({});
});
afterEach(() => {
jest.clearAllMocks();
});
afterAll(() => {
getServer().close();
});
+FTUͷTFUVQ'JMFT"GUFS&OWͰॻ͍͍ͯΔ༰