```ts // MyForm.stories.ts import { expect } from '@storybook/jest'; import { userEvent, waitFor, within } from '@storybook/testing-library'; // Replace your-framework with the name of your framework import type { Meta } from '@storybook/your-framework'; import { MyForm } from './MyForm'; const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'MyComponent', component: MyComponent, argTypes: { onSubmit: { action: true }, }, }; export default meta; type Story = StoryObj; /* * See https://storybook.js.org/docs/7.0/react/writing-stories/play-function#working-with-the-canvas * to learn more about using the canvasElement to query the DOM */ export const Submitted: Story = { play: async ({ args, canvasElement, step }) => { const canvas = within(canvasElement); await step('Enter credentials', async () => { await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); await userEvent.type(canvas.getByTestId('password'), 'supersecret'); }); await step('Submit form', async () => { await userEvent.click(canvas.getByRole('button')); }); await waitFor(() => expect(args.onSubmit).toHaveBeenCalled()); }, }; ```