Zenn
Open3

Storybook(CSF)によるテスト

Storybook
Jest
gaKnightgaKnight

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のようなテストなどの領域で利用できる。

https://storybook.js.org/docs/vue/writing-stories/play-function

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
};
gaKnightgaKnight

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

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