storybook/docs/snippets/react/my-component-play-function-alt-queries.mdx.mdx
2022-07-07 19:47:29 +01:00

29 lines
796 B
Plaintext

```md
<!-- MyComponent.stories.mdx -->
import { Meta, Story } from '@storybook/addon-docs';
import { screen, userEvent } from '@storybook/testing-library';
import { MyComponent } from './MyComponent';
<Meta title="QueryMethods" component={MyComponent} />
<Story
name="ExampleWithRole"
play={ async () => {
// See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(screen.getByRole('button', { name: / button label/i }));
}}>
<MyComponent />
</Story>
<Story
name="ExampleWithText"
play={ async () => {
// The play function interacts with the component and looks for the text
await screen.findByText('example string');
}}>
<MyComponent />
</Story>
```