Add a chromatic test for mount args for React, Vue and Svelte

code/renderers/react/template/stories/mount-in-play.stories.tsx

@@ -0,0 +1,20 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+
+const Button: FC<{ label?: string; disabled?: boolean }> = (props) => {
+  return <button disabled={props.disabled}>{props.label}</button>;
+};
+
+export default {
+  component: Button,
+};
+
+export const Basic: StoryObj<typeof Button> = {
+  args: {
+    disabled: true,
+  },
+  async play({ mount, args }) {
+    await mount(<Button {...args} label={'set in play'} />);
+  },
+};

code/renderers/svelte/template/stories/Button.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  /**
+   * Is this the principal call to action on the page?
+   */
+  export let primary = false;
+
+  /**
+   * What background color to use
+   */
+  export let backgroundColor = undefined;
+
+  /**
+   * How large should the button be?
+   */
+  export let size = 'medium';
+
+  /**
+   * Button contents
+   */
+  export let label = '';
+
+  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+
+  const dispatch = createEventDispatcher();
+
+  /**
+   * Optional click handler
+   */
+  export let onClick = (event) => {
+    dispatch('click', event);
+  };
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+  {style}
+  on:click={onClick}
+>
+  {label}
+</button>

code/renderers/svelte/template/stories/mount-in-play.stories.ts

@@ -0,0 +1,15 @@
+import Button from './Button.svelte';
+import type { StoryObj } from '@storybook/svelte';
+
+export default {
+  component: Button,
+};
+
+export const Basic: StoryObj = {
+  args: {
+    disabled: true,
+  },
+  async play({ mount, args }) {
+    await mount(Button, { props: { ...args, label: 'set in play' } });
+  },
+};

code/renderers/vue3/src/types.ts

@@ -29,6 +29,6 @@ export interface VueRenderer extends WebRenderer {
   mount: (
     Component?: StoryFnVueReturnType,
     // TODO add proper typesafety
-    options?: { props: Record<string, any>; slots: Record<string, any> }
+    options?: { props?: Record<string, any>; slots?: Record<string, any> }
   ) => Promise<Canvas>;
 }

code/renderers/vue3/template/stories_vue3-vite-default-ts/mount-in-play.stories.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/vue3';
+import { defineComponent } from 'vue';
+
+const Button = defineComponent({
+  template: '<button :disabled="disabled">{{label}}</button>',
+  props: ['disabled', 'label'],
+});
+
+export default {
+  component: Button,
+};
+
+export const Basic: StoryObj<typeof Button> = {
+  args: {
+    disabled: true,
+  },
+  async play({ mount, args }) {
+    await mount(Button, { props: { ...args, label: 'set in play' } });
+  },
+};