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

[JReinhold]

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');
}} />

2. 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

[SteveALee]

A workaround until the PR edge cases get resolved is to use beforeEach and switch on the name property of the enhanced StoryContext object passed as the first parameter. Eg:

 const { Story } = defineMeta({
...
  async beforeEach(ctx) {
    if (ctx.name == 'My Story') {
    // Pre mount code for My Story
    }
...
}