```ts // MyComponent.stories.ts // import type { Meta, StoryObj } from '@storybook/vue3'; for Vue 3 import type { Meta, StoryObj } from '@storybook/vue'; import { userEvent, waitFor, within } from '@storybook/testing-library'; import MyComponent from './MyComponent.vue'; const meta: Meta = { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'WithAsync', component: MyComponent, }; export default meta; type Story = StoryObj; /* * See https://storybook.js.org/docs/7.0/vue/writing-stories/play-function#working-with-the-canvas * to learn more about using the canvasElement to query the DOM */ export const ExampleAsyncStory: Story = { render: () => ({ components: { MyComponent }, template: '', }), play: async ({ canvasElement }) => { const canvas = within(canvasElement); const Input = canvas.getByLabelText('Username', { selector: 'input', }); await userEvent.type(Input, 'WrongInput', { delay: 100, }); // See https://storybook.js.org/docs/7.0/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel const Submit = canvas.getByRole('button'); await userEvent.click(Submit); await waitFor(async () => { await userEvent.hover(canvas.getByTestId('error')); }); }, }; ```