Document mount changes

[kasperpeulen]

• Stories -> Play function
  • Add a section at the bottom about advanced use case using the mount so you can execute code before rendering (which changes per renderer) Make sure to explain you always have to destructure mount (maybe add to error)
  • Show how to render custom components (only for React, Vue3 and Svelte) in similar recipe
• Interaction testing
  • show how to run code before rendering for a single test, which is different than beforeEach
  • remove typescript types arent recognized section
• Mention mount stories needing autoplay in docs: https://storybook.js.org/docs/api/doc-blocks/doc-block-story#autoplay

[greptile-apps[bot]]

Stories -> Play function

Advanced Use Case: Using mount

You can execute code before rendering by using the mount function in the play method. Note that you must always destructure mount from the context. If you do not, an error will be thrown.

// React Example
export const MyStory = {
  async play({ mount }) {
    const canvas = await mount(MyComponent, { props: { label: 'label', disabled: true } });
    // Your code here
  },
};

// Vue3 Example
export const MyStory = {
  async play({ mount }) {
    const canvas = await mount(MyComponent, { props: { label: 'label', disabled: true } });
    // Your code here
  },
};

// Svelte Example
export const MyStory = {
  async play({ mount }) {
    const canvas = await mount(MyComponent, { props: { label: 'label', disabled: true } });
    // Your code here
  },
};

Interaction Testing

Running Code Before Rendering for a Single Test

You can run code before rendering for a single test by using the play method. This is different from beforeEach as it runs only for the specific test.

export const MyStory = {
  async play({ mount }) {
    // Code to run before rendering
    const canvas = await mount(MyComponent, { props: { label: 'label', disabled: true } });
    // Your code here
  },
};

Error Handling

If you do not destructure mount, an error will be thrown:

export class MountMustBeDestructuredError extends StorybookError {
  readonly category = Category.PREVIEW_API;
  readonly code = 12;

  constructor(public data: { playFunction: string }) {
    super();
  }

  template() {
    return dedent`
    To use mount in the play function, you must use object destructuring, e.g. play: ({ mount }) => {}.

    Instead received:
    ${this.data.playFunction}
    `;
  }
}

Autoplay Requirement

Mention that stories using mount need autoplay in the Story Doc Block:

### `autoplay`

Type: `boolean`

Default: `parameters.docs.story.autoplay`

Determines whether a story's play function runs. Stories using `mount` require `autoplay` to be set to `true`.

References

/code/core/src/preview-api/modules/preview-web/render/StoryRender.test.ts /code/core/src/preview-errors.ts /code/renderers/vue3/src/public-types.test.ts /code/lib/test/template/stories/mount-in-play.stories.ts /code/renderers/react/src/public-types.test.tsx /code/renderers/svelte/src/public-types.test.ts /docs/writing-stories /docs/api/doc-blocks/doc-block-story.mdx /docs/api/portable-stories /code/core/src/preview-api/modules/preview-web/render

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)