Test: Add args to mount in react, svelte, and vue renderers

code/lib/types/src/modules/csf.ts

@@ -11,6 +11,7 @@ export type {
   ArgTypes,
   ArgTypesEnhancer,
   BaseAnnotations,
+  Canvas,
   ComponentAnnotations,
   ComponentId,
   ComponentTitle,

code/renderers/react/src/entry-preview.ts

@@ -1,3 +1,4 @@
 export const parameters: {} = { renderer: 'react' };
 export { render } from './render';
 export { renderToCanvas } from './renderToCanvas';
+export { mount } from './mount';

code/renderers/react/src/mount.ts

@@ -0,0 +1,11 @@
+import { type StoryContext, type ReactRenderer } from './public-types';
+import type { BaseAnnotations } from '@storybook/types';
+
+export const mount: BaseAnnotations<ReactRenderer>['mount'] =
+  (context: StoryContext) => async (ui) => {
+    if (ui != null) {
+      context.originalStoryFn = () => ui;
+    }
+    await context.renderToCanvas();
+    return context.canvas;
+  };

code/renderers/react/src/public-types.test.tsx

@@ -317,7 +317,7 @@ it('Infer mock function given to args in meta.', () => {
 
   const Basic: Story = {
     play: async ({ args, mount }) => {
-      const canvas = await mount();
+      const canvas = await mount(<TestButton {...args} />);
       expectTypeOf(canvas).toEqualTypeOf<Canvas>();
       expectTypeOf(args.onClick).toEqualTypeOf<Mock<[], void>>();
       expectTypeOf(args.onRender).toEqualTypeOf<() => JSX.Element>();

code/renderers/react/src/types.ts

@@ -1,11 +1,12 @@
 import type { ComponentType } from 'react';
-import type { WebRenderer } from '@storybook/types';
+import type { Canvas, WebRenderer } from '@storybook/types';
 
 export type { RenderContext, StoryContext } from '@storybook/types';
 
 export interface ReactRenderer extends WebRenderer {
   component: ComponentType<this['T']>;
   storyResult: StoryFnReactReturnType;
+  mount: (ui?: JSX.Element) => Promise<Canvas>;
 }
 
 export interface ShowErrorArgs {

code/renderers/svelte/src/entry-preview.ts

@@ -2,3 +2,4 @@ export const parameters: {} = { renderer: 'svelte' };
 
 export { render, renderToCanvas } from './render';
 export { decorateStory as applyDecorators } from './decorators';
+export { mount } from './mount';

code/renderers/svelte/src/mount.ts

@@ -0,0 +1,15 @@
+import { type StoryContext, type SvelteRenderer } from './public-types';
+import { type BaseAnnotations } from '@storybook/types';
+
+export const mount: BaseAnnotations<SvelteRenderer>['mount'] = (context: StoryContext) => {
+  return async (Component, options) => {
+    if (Component) {
+      context.originalStoryFn = () => ({
+        Component: Component,
+        props: options?.props ?? options,
+      });
+    }
+    await context.renderToCanvas();
+    return context.canvas;
+  };
+};

code/renderers/svelte/src/types.ts

@@ -1,4 +1,4 @@
-import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
+import type { Canvas, StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
 import type { ComponentConstructorOptions, ComponentEvents, SvelteComponent } from 'svelte';
 
 export type StoryContext = StoryContextBase<SvelteRenderer>;
@@ -37,6 +37,11 @@ export interface SvelteRenderer<C extends SvelteComponent = SvelteComponent> ext
   storyResult: this['T'] extends Record<string, any>
     ? SvelteStoryResult<this['T'], ComponentEvents<C>>
     : SvelteStoryResult;
+
+  mount: (
+    Component?: ComponentType,
+    options?: Record<string, any> & { props: Record<string, any> }
+  ) => Promise<Canvas>;
 }
 
 export interface SvelteStoryResult<

code/renderers/vue3/src/entry-preview.ts

@@ -1,3 +1,4 @@
 export const parameters: {} = { renderer: 'vue3' };
 export { render, renderToCanvas } from './render';
 export { decorateStory as applyDecorators } from './decorateStory';
+export { mount } from './mount';

code/renderers/vue3/src/mount.ts

@@ -0,0 +1,13 @@
+import { type StoryContext, type VueRenderer } from './public-types';
+import { h } from 'vue';
+import { type BaseAnnotations } from '@storybook/types';
+
+export const mount: BaseAnnotations<VueRenderer>['mount'] = (context: StoryContext) => {
+  return async (Component, options) => {
+    if (Component) {
+      context.originalStoryFn = () => () => h(Component, options?.props, options?.slots);
+    }
+    await context.renderToCanvas();
+    return context.canvas;
+  };
+};

code/renderers/vue3/src/types.ts

@@ -1,4 +1,8 @@
-import { type StoryContext as StoryContextBase, type WebRenderer } from '@storybook/types';
+import {
+  type Canvas,
+  type StoryContext as StoryContextBase,
+  type WebRenderer,
+} from '@storybook/types';
 import type { App, ConcreteComponent } from 'vue';
 
 export type { RenderContext } from '@storybook/types';
@@ -21,4 +25,9 @@ export interface VueRenderer extends WebRenderer {
   // Try not omitting, and check the type errros in the test file, if you want to learn more.
   component: Omit<ConcreteComponent<this['T']>, 'props'>;
   storyResult: StoryFnVueReturnType;
+
+  mount: (
+    Component?: StoryFnVueReturnType,
+    options?: { props: Record<string, any>; slots: Record<string, any> }
+  ) => Promise<Canvas>;
 }