Industry standard frontend workshop. Develop, test, and document components with ease. Open-source & maintained by @chromaticcom
- Tweets 7,014
- Following 393
- Followers 25,685
- Likes 6,645
ALT The app/note/edit/page.stories.jsx file, containing: export const SaveNewNote = { play: async ({ mount }) => { // Arrange cookies().set(userCookieKey, await createUserCookie('storybookjs')); const canvas = await mount(); // Act const titleInput = await canvas.findByLabelText( 'Enter a title for your note', ) const bodyInput = await canvas.findByLabelText( 'Enter the body for your note', ) await userEvent.clear(titleInput) await userEvent.type(titleInput, 'New Note Title') await userEvent.type(bodyInput, 'New Note Body') await userEvent.click( await canvas.findByRole('menuitem', { name: /done/i }), ) // Assert await waitFor(() => expect(getRouter().push).toHaveBeenLastCalledWith('/note/1', expect.anything()), ); await expect(await db.note.findUnique({ where: { id: 1 } })).toEqual( expect.objectContaining({ title: 'New Note Title', body: 'New Note Body', }),
![The app/notes/[id]/page.stories.jsx file, containing:
import type { Meta, StoryObj } from '@storybook/react';
import { db, initializeDB } from '#lib/db.mock';
import Page from './page';
import { PageDecorator } from '#.storybook/decorators';
export default {
component: Page,
async beforeEach() {
await db.note.create({
data: {
title: 'Module mocking in Storybook?',
body: "Yup, that's a thing now! 🎉",
createdBy: 'storybookjs',
},
});
await db.note.create({ /* another */ });
},
decorators: [PageDecorator],
parameters: {
layout: 'fullscreen',
nextjs: {
navigation: { pathname: '/note/1' },
},
},
args: { params: { id: '1' } },
};
export const NotLoggedIn = {}
export const EmptyState = {
async play({ mount }) {
initializeDB({});
await mount();
},
}](/pic/orig/media%2FGd5eUHSWUAAuqXZ.jpg)
ALT The app/notes/[id]/page.stories.jsx file, containing: import type { Meta, StoryObj } from '@storybook/react'; import { db, initializeDB } from '#lib/db.mock'; import Page from './page'; import { PageDecorator } from '#.storybook/decorators'; export default { component: Page, async beforeEach() { await db.note.create({ data: { title: 'Module mocking in Storybook?', body: "Yup, that's a thing now! 🎉", createdBy: 'storybookjs', }, }); await db.note.create({ /* another */ }); }, decorators: [PageDecorator], parameters: { layout: 'fullscreen', nextjs: { navigation: { pathname: '/note/1' }, }, }, args: { params: { id: '1' } }, }; export const NotLoggedIn = {} export const EmptyState = { async play({ mount }) { initializeDB({}); await mount(); }, }
![The app/notes/[id]/page.stories.jsx file, containing:
import { cookies } from '@storybook/nextjs/headers.mock';
import { createUserCookie, userCookieKey } from '#lib/session';
// export default { ... } from before
export const LoggedIn = {
async beforeEach() {
cookies().set(userCookieKey, await createUserCookie('storybookjs'));
}
}](/pic/orig/media%2FGd5eG6ZXkAAAQrJ.jpg)
ALT The app/notes/[id]/page.stories.jsx file, containing: import { cookies } from '@storybook/nextjs/headers.mock'; import { createUserCookie, userCookieKey } from '#lib/session'; // export default { ... } from before export const LoggedIn = { async beforeEach() { cookies().set(userCookieKey, await createUserCookie('storybookjs')); } }
![The package.json file, containing:
"imports": {
"#app/actions": {
"storybook": "./app/actions.mock.ts",
"default": "./app/actions.ts"
},
"#lib/session": {
"storybook": "./lib/session.mock.ts",
"default": "./lib/session.ts"
},
"#lib/db": {
"storybook": "./lib/db.mock.ts",
"default": "./lib/db.ts"
},
"#lib/sanitize-html": {
"storybook": "./lib/sanitize-html.mock.ts",
"default": "./lib/sanitize-html.ts"
},
"#*": [
"./*",
"./*.ts",
"./*.tsx"
]
},](/pic/orig/media%2FGd5dtMfWAAAyibv.jpg)
ALT The package.json file, containing: "imports": { "#app/actions": { "storybook": "./app/actions.mock.ts", "default": "./app/actions.ts" }, "#lib/session": { "storybook": "./lib/session.mock.ts", "default": "./lib/session.ts" }, "#lib/db": { "storybook": "./lib/db.mock.ts", "default": "./lib/db.ts" }, "#lib/sanitize-html": { "storybook": "./lib/sanitize-html.mock.ts", "default": "./lib/sanitize-html.ts" }, "#*": [ "./*", "./*.ts", "./*.tsx" ] },
ALT A trophy labeled with different kinds of tests. Component tests make up the bulk of the trophy.
ALT A spectrum titled When to test RSCs, going from In dev to In CI. Component tests in Storybook span the spectrum. End-to-end tests in Playwright only spans the end near In CI.
ALT Storybook and React Server Components
