Intro to Storybook 実践memo

[YukoKano]

サンプル通りにやったのにyarn test --watchAllでtestないよって言われた

[YukoKano]

yarn add jest

してpackage.jsonを追加して直った

"scripts": {
    "test": "jest --watchAll"
  }

[YukoKano]

このコミュニティの翻訳は、最新の Storybook バージョンに対応していません。英語ガイドの最新の変更を適用して、この日本語ガイドの更新にご協力ください。 Pull requests を大歓迎します。

バージョンが古かったからおかしかったのかもしれん　今8だもんね

[YukoKano]

ou@kurogoma taskbox % yarn storybook
yarn run v1.22.19
warning ../../../../package.json: No license field
$ storybook dev -p 6006
@storybook/cli v8.1.4

SB_CORE-COMMON_0002 (InvalidFrameworkNameError): Invalid value of '@storybook/react' in the 'framework' field of Storybook config.

Please run 'npx storybook automigrate' to automatically fix your config.

More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api

    at validateFrameworkName (./node_modules/@storybook/core-common/dist/index.js:50:2172)
    at buildDevStandalone (./node_modules/@storybook/core-server/dist/index.js:65:1673)
    at async withTelemetry (./node_modules/@storybook/core-server/dist/index.js:28:3599)
    at async dev (./node_modules/@storybook/cli/dist/generate.js:705:563)
    at async Command.<anonymous> (./node_modules/@storybook/cli/dist/generate.js:707:250)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

WARN Could not resolve addon "@storybook/preset-create-react-app", skipping. Is it installed?
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

npx storybook automigrate

したらよしなに調整してくれたっぽい、？

[YukoKano]

これダメだ、作り直します。

[YukoKano]

作り直した、次は「Build out the states」から https://storybook.js.org/tutorials/intro-to-storybook/react/en/simple-component/

[YukoKano]

きちんと型定義しないとこういうエラーが出るっぽい

[YukoKano]

Addon でこういうパネルも検証することができるのか

[YukoKano]

次はここから https://storybook.js.org/tutorials/intro-to-storybook/react/en/composite-component/

[YukoKano]

[YukoKano]

Data requirements and props から

[YukoKano]

PropTypes、非推奨になってるやんけ

https://ja.react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops

早めにTypeScriptやっといたほうがいいんだろうか

[YukoKano]

TODO：const { hoge }　import { hoge } 、とconst hoge import hoge、で何が違うのか記事書く

[kano-yuko]

山田さん）argsでどういう挙動になるのかが分かれば良さそう

[YukoKano]

ページをStoryして、エラーが出ると書いてあったけど特段エラーは出てないんだよな、

Mocking API Servicesから続きやる

↑エラーページがちゃんとエラーページを吐かないのがエラーだったっぽい

[YukoKano]

yarn test-storybook --watch

をするためにはStorybook立ち上げておかないといけないっぽい

Storybook's test runner requires either a locally running Storybook instance or a published Storybook to run all the existing tests.

---

動いたが、テスト環境ないよって言われて、これを↓たたいた

yarn playwright install  

自動テストのためのツールっぽい

yarn playwright installコマンドは、Playwrightのブラウザバイナリをインストールするためのコマンドです。Playwrightは、Node.js用のエンドツーエンドテストツールで、Chromium、Firefox、WebKitなどの異なるブラウザで自動テストを実行することができます。

yarn playwright installコマンドは、Playwrightが初めてインストールされたときに一度だけ実行すれば十分です。その後のテスト実行時には、インストールされたブラウザバイナリを利用するだけで済みます。 例えば、@storybook/test-runnerはPlaywrightを使用してStorybookのコンポーネントをテストするため、yarn playwright installが必要になることがあります。

---

通った↓

[YukoKano]

import {
  fireEvent,
  waitFor,
  within,
  waitForElementToBeRemoved,
} from "@storybook/test";

この辺からの記述がわからん

[YukoKano]

変数を設定した

[YukoKano]

ファイルの依存関係がおかしくなっていてずっとエラーが出ているので修正している

[YukoKano]

通った〜〜〜〜〜〜〜〜〜〜！ChatGPTありがとう！！！！！

[YukoKano]

学び：

• Actionsのワークフローを使う場合、サイトから環境変数を設定する（GITHUB_から始まるのはNGでした）
• コケるエラーをよくみて、一個ずつ潰す、何か間違っていれば依存関係の問題っぽい
  • 一旦ChatGPTに投げると原因まとめてくれるからめっちゃわかりやすい

[YukoKano]

あんがとね

[YukoKano]

Visual Testsからやる

[YukoKano]

終わった〜！

[YukoKano]

1日30分、約11日で完了している　＝330分　＝6時間半