Industry standard frontend workshop. Develop, test, and document components with ease. Open-source & maintained by @chromaticcom
- Tweets 7,014
- Following 393
- Followers 25,682
- Likes 6,645
![A screenshot of the `noteDetail.stories.ts` file, containing the code: import { cookies } from '@storybook/nextjs/headers.mock'; import { createUserCookie, userCookieKey } from '#lib/cookie'; import Page from './noteDetail'; const meta = { component: Page, // Use an RSC component in Storybook! async beforeEach() { // Set a Next.js cookie before each story is rendered cookies().set(userCookieKey, await createUserCookie('alice')) }, parameters: { nextjs: { navigation: { pathname: '/note/[id]', query: { id: '1' } }, }, }, } satisfies Meta<typeof Page>](/pic/orig/media%2FGOSAXL_WYAAPUUQ.jpg)
ALT A screenshot of the `noteDetail.stories.ts` file, containing the code: import { cookies } from '@storybook/nextjs/headers.mock'; import { createUserCookie, userCookieKey } from '#lib/cookie'; import Page from './noteDetail'; const meta = { component: Page, // Use an RSC component in Storybook! async beforeEach() { // Set a Next.js cookie before each story is rendered cookies().set(userCookieKey, await createUserCookie('alice')) }, parameters: { nextjs: { navigation: { pathname: '/note/[id]', query: { id: '1' } }, }, }, } satisfies Meta<typeof Page>
![A screenshot of a portion of a `package.json` file containing the code: { "type": "module", "imports": { "#lib/db": { "storybook": "./lib/db.mock.ts", "default": "./lib/db.ts" }, "#*": [ "./*", "./*.ts", "./*.tsx" ] } }](/pic/orig/media%2FGOR_x7_WkAA1MIf.jpg)
ALT A screenshot of a portion of a `package.json` file containing the code: { "type": "module", "imports": { "#lib/db": { "storybook": "./lib/db.mock.ts", "default": "./lib/db.ts" }, "#*": [ "./*", "./*.ts", "./*.tsx" ] } }
ALT An image showing the Angular logo and the label v18 is now available
ALT Chromatic
ALT Source code for file, RestaurantDetailPage.spec.tsx: // For Vue3, import from '@storybook/vue3/experimental-playwright' import { createTest } from '@storybook/react/experimental-playwright' // For Vue3, import from '@playwright/experimental-ct-vue' import { test as base, expect } from '@playwright/experimental-ct-react' import stories from './RestaurantDetailPage.stories.portable' const test = createTest(base) test('Default', async ({ mount }) => { // The mount function will execute all the necessary steps in the story, // such as loaders, render, and play function await mount(<stories.Default />) }) test('WithItemsInTheCart', async ({ mount, page }) => { await mount(<stories.Success />) await page.getByLabel('menu item').first().click() await page.getByLabel('increase quantity by one').click() await page.getByLabel('confirm').click() await expect(page.getByLabel('food cart')).toContainText('€25.50') })