Storybook test

メモ

intaractive storiesの活用について

コードは以下の様に記載すると、Canvas表示時にアクションする。

code:input.stories.tsx

import { ComponentMeta, ComponentStoryObj } from '@storybook/react';

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

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

import { Input } from './index';

export default {

title: 'form/Input',

component: Input,

} as ComponentMeta<typeof Input>;

export const Default: ComponentStoryObj<typeof Input> = {

args: {

placeholder: 'プレースホルダー',

},

};

export const focus確認 = {

...Default,

args: {

placeholder: 'プレースホルダー',

},

play: async ({ canvasElement }) => {

const canvas = within(canvasElement);

canvas.getByPlaceholderText('プレースホルダー').focus();

},

};

参考

CSF3.0, testing-library, regsuitで快適フロントテスト始め

React Testing Libraryにチャレンジ 2 （現在進行形）

UI コンポーネントをテストする

Storybook でインタラクションテストを作成して Jest で再利用する