runnerを使ってみようtanesanこんにちは。最近フロントエンドのテストについて興味ありなtanesanです。Actionsを使ったCIパイプラインの作成をゴールに、プロジェクトの作成からハンズオン形式で紹介していきます。今回はViteを使用してプロジェクトを作成していきます。使用したNode.jsのバージョンはv18.16.1です。<プロジェクト名>フレームワークはReactを選択。variantはTypeScriptを選択ひとまずプロジェクトを立ち上げてみます。dev↓の画面が出ていればOKです。今回は簡単なフォームのコンポーネントを作成して、こちらを対象にしてStorybookを使ったテストを作成していきます。src配下にcomponentsディレクトリを作成してUserForm.tsxを作成します。);};名前・年齢・メールアドレスを入力して「Submit」ボタンを押すと内容がフォームの下に表示されるといったコンポーネントです。Storybookの作成UserForm.tsxのStorybookを作成していきます。Storybookを使用できるようにします。initコンポーネントを表示するだけのStoryを作ってみます。{};Storybookを立ち上げてみます。storybook正常に起動できれば↓のようにコンポーネントが表示されます。functionは、ユーザのインタラクションを再現したStoryを作成できるStorybookの機能です。functionを使用するために必要なモジュールをインストールします。--save-devまずは、「Name」を入力するStoryを作ってみます。},};Testing-libraryとほぼ同じ要領で、要素を取得しインタラクションを与えることができます。functionはStorybookのInteractionsタブで確認できます。正常に動作していれば↓の通りになります。functionの再利用ができます。InputNameの要領で年齢を入力するStory(InputAge)、Emailを入力するStory(InputEmail)を作成します。それらのStoryを呼び出し、フォームを入力したあとに「Submit」ボタンを押すStory(InputAll)を作成します。},};正常に動作していれば↓のとおりになります。funtion内でアサーションを書くことができます。InputAllに「Submit」ボタン押下後に入力した情報が表示されているか検証するアサーションを書いてみます。},};追記後にもう一度StorybookのInteractionsタブを確認すると、アサーションが追加されているはずです。runnerを導入し、Storyを実行可能なテストとして扱えるようにします。Storyをテストとして扱うことで、Storyがエラーなしでレンダリングができるか・インタラクションが意図した通りに動作しているかを検証できます。}}テストを実行してみます。test-storybookstorybookを正しく記述できていればPASSしているはずです。CIの作成Storybookのテストを含むCIを作成します。Actionsのworkflowを作成します。test-storybook"今回の例では公式ページのサンプルのままでOKです。workflowファイルを作成後、リモートリポジトリにpushします。(リポジトリの作成は適宜お願いします)GithubのActionsタブからCIの実行結果を確認します。設定されていれば↓のように成功しているはずです。まとめこの記事では、StorybookのStoryをテスト化し、CIに組み込む方法を紹介しました。functionを利用することで、コンポーネントの外観だけではなく振る舞いまでをStorybookで検証することが可能になります。Libraryを使用してテストを作成するよりも、コンポーネントの実際の振る舞いを理解しやすく、テストが書きやすいと思いました。適切にストーリーを作成すれば、コンポーネントの仕様をStorybookだけで共有することが可能となるので、非エンジニアの方との連携がスムーズになるメリットもあるかと思います。CIの設定と作成したコンポーネントのStoryさえ作成しておけば、レンダリングのエラーを自動的に検出することができるので、この仕組みをプロジェクト初期から組み込むことで、デグレの削減が期待できるのもいいですね。ウェブサービス株式会社(DWS)公式ブログ記事URLをコピーしました。