@storybook/addon-interactions

https://gyazo.com/e48e4da40d8446a79764d305c01a3b89 https://storybook.js.org/addons/@storybook/addon-interactions

@testing-library/user-event的なテストコードを書いておくと、

テストコードを実行しながら、その遷移をView上で確認できる感じか

code:ts

import { Button } from './Button';

import { expect } from '@storybook/jest';

import { within, userEvent } from '@storybook/testing-library';

export default {

title: 'Button',

component: Button,

argTypes: {

onClick: { action: true },

};

const Template = (args) => <Button {...args} />;

export const Demo = Template.bind({});

Demo.play = async ({ args, canvasElement }) => {

const canvas = within(canvasElement);

await userEvent.click(canvas.getByRole('button'));

await expect(args.onClick).toHaveBeenCalled();

};