Storybook(CSF)によるテスト

Play function

Play functions are small snippets of code executed after the story renders. Enabling you to interact with your components and test scenarios that otherwise required user intervention.

訳: play functionは、ストーリーのレンダリング後に実行されるコードの小さなスニペットです。コンポーネントを操作したり、ユーザーの介入が必要なシナリオをテストしたりできるようにします。

要はStorybookでユーザーの入力やクリックといったインタラクションな操作を表現できる。この操作を利用してtorybook 上で定義したインタラクションを Jestのようなテストなどの領域で利用できる。

addonを追加（`addon-interactions`）

yarn好きなのでyarnのみ

yarn add --dev @storybook/addon-interactions @storybook/testing-library

Storybookの管理ファイル（`storybook/main.js`）に追加

自分が個人的によく使っているのはNuxtなのでnuxt.config.tsに追加

// .storybook/main.js

module.exports = {
  stories:[],
  addons:[
    // Other Storybook addons
    '@storybook/addon-interactions', //👈 The addon registered here
};

gaKnight

簡単なStoryを書く（後ほど更新）

の前に簡単なコンポーネントファイルを作成する
Storybookを書く

gaKnight

参考

addonを追加（addon-interactions）

Storybookの管理ファイル（storybook/main.js）に追加

addonを追加（`addon-interactions`）

Storybookの管理ファイル（`storybook/main.js`）に追加