故事 -> 播放功能

高级用例：使用 mount

您可以通过在 play 方法中使用 mount 函数，在渲染之前执行代码。请注意，您必须始终从上下文中解构 mount。如果您不这样做，将抛出错误。

// 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
  },
};

交互测试

在单个测试中运行渲染之前的代码

您可以通过使用 play 方法在单个测试中运行渲染之前的代码。这与 beforeEach 不同，因为它仅针对特定测试运行。

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

错误处理

如果您没有解构 mount,将抛出错误：

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}
`;
  }
}

自动播放要求

在故事文档块中提及使用 mount 的故事需要 autoplay:

### `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`.

参考资料

/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

关于 Greptile

此响应为您提供了研究的起点，而不是精确的解决方案。
帮助我们改进！如果这有帮助请留下一个👍，如果无关请留下一个👎。