Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] mount() in play() fails with SB_PREVIEW_API_0012 (MountMustBeDestructuredError): Incorrect use of mount in the play function. #270

Open
JReinhold opened this issue Jan 21, 2025 · 0 comments
Assignees
Labels
bug Something isn't working

Comments

@JReinhold
Copy link
Collaborator

JReinhold commented Jan 21, 2025

Describe the bug

When using the mount-construct in a play-function as described in the docs:

https://storybook.js.org/docs/writing-tests/component-testing#run-code-before-the-component-gets-rendered

The Component Tests panel fails with the following message:

SB_PREVIEW_API_0012 (MountMustBeDestructuredError): Incorrect use of mount in the play function.

To use mount in the play function, you must satisfy the following two requirements: 

1. You *must* destructure the mount property from the `context` (the argument passed to your play function). 
   This makes sure that Storybook does not start rendering the story before the play function begins.

2. Your Storybook framework or builder must be configured to transpile to ES2017 or newer. 
   This is because destructuring statements and async/await usages are otherwise transpiled away, 
   which prevents Storybook from recognizing your usage of `mount`.

Note that Angular is not supported. As async/await is transpiled to support the zone.js polyfill. 

More info: https://storybook.js.org/docs/writing-tests/interaction-testing#run-code-before-the-component-gets-rendered

Received the following play function:
(storyContext) => {
        var _a;
        const delegate = (_a = storyContext.playFunction) == null ? void 0 : _a.__play;
        if (delegate) {
          return delegate(storyContext);
        }
        return play(storyContext);
      }
    at g.mount (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/storybook_internal_preview_runtime.js?v=0680545d:8004:19)
    at play (http://localhost:6006/tests/stories/Mount.stories.svelte:31:9)
    at storyObj.play (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@storybook_addon-svelte-csf_internal_create-runtime-stories.js?v=0680545d:676:18)
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/storybook_internal_preview_runtime.js?v=0680545d:8005:60
    at Sn2.runPhase (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/storybook_internal_preview_runtime.js?v=0680545d:7888:100)
    at Sn2.render (http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/storybook_internal_preview_runtime.js?v=0680545d:8005:25)

Steps to reproduce the behavior

  1. Add the following story to the examples dir in this repo:
<script module>
  import { defineMeta } from '@storybook/addon-svelte-csf';
  import Text from './Text.svelte';

  const { Story } = defineMeta({
    title: 'Mount',
    component: Text,
    parameters: {
      controls: { disable: true },
    },
  });
</script>

<Story name="With Mount" play={async ({ mount }) => {
    console.log('pre 1');
    await mount();
    console.log('post 1');
}} />
  1. Open story in Storybook and see error.

Additional Context

The detection mechanism that is currently failing is here: https://github.com/storybookjs/storybook/blob/next/code%2Fcore%2Fsrc%2Fpreview-api%2Fmodules%2Fpreview-web%2Frender%2Fmount-utils.ts

@JReinhold JReinhold added the bug Something isn't working label Jan 21, 2025
@JReinhold JReinhold self-assigned this Jan 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant