LoginSignup
8
0

はじめに

初めまして!
エンジニアになって数年、今まで本を読むだけでしたが、もっとプライベートで楽しみながら成長したい!自分が学んだ足跡を残していきたい!と思い記事を書きました!
最終的には自在に開発できるようになりたいと思っています。:triumph:
いろいろな記事を参考にさせてもらっています。:bow_tone2:

「いいね」か「ブックマーク」
を頂けると僕のモチベーションアップになります!:thumbsup:
少しでも気に入っていただけたらよろしくお願いいたします!:thumbsup:

今回の目的

自分の作ったコンポーネントを確認したり検証するための技術を身に付けたい!
公式のクイックスタートを参考に進めていきます。
項目ごとに補足のみ書いて進めています。わかりづらいところの理解の手助けになれば幸いです!

前回

主に参考にさせていただいた記事

バージョン

React-18.2
Storybook-8.1.4

Interaction tests

動作テストを行う。
・fireEvent
クリックや入力などのユーザーの動作をシミュレートするためのものです。

import { fireEvent } from '@storybook/test';
fireEvent.click(buttonElement);
fireEvent.change(inputElement, { target: { value: 'new value' } });

・waitFor
非同期処理の動作を待つためのもの。

import { waitFor } from '@storybook/test';
await waitFor(() => {
  expect(someElement).toBeInTheDocument();
});

・within
コンテナ内の要素を探し、対象として選択できるようにする。canvasElementと併用すると全体のDOM情報を取得できる。

import { within } from '@storybook/test';
const container = within(someElement);
expect(container.getByText('some text')).toBeInTheDocument();

・waitForElementToBeRemoved
要素が削除されるまで順次処理を止める。

import { waitForElementToBeRemoved } from '@storybook/test';
await waitForElementToBeRemoved(() => document.querySelector('.loading-spinner'));

storyBook内のテストケースに記述します。

export const Default = {
  parameters: {
    ...
  },
 play: async ({ canvasElement }) => {
   // storyBookのcanvas取得
   const canvas = within(canvasElement);
   // data-testid="loading"で登録したところを確認して消えたら次の処理
   await waitForElementToBeRemoved(await canvas.findByTestId('loading'));
   // 内部のクリック処理が完全に終わるまで待機
   await waitFor(async () => {
     await fireEvent.click(canvas.getByLabelText('pinTask-1'));
     await fireEvent.click(canvas.getByLabelText('pinTask-3'));
   });
 },
};

Automate tests with the test runner

全てのstoryテストの自動化

npm i --dev @storybook/test-runner

package.jsonにscriptコマンドを追加

{
  "scripts": {
    "test-storybook": "test-storybook"
  }
}

実行した際に下記のエラーが出たら

スクリーンショット 2024-06-10 2.37.23.png

コマンド実行し、ブラウザエンジンを操作するplaywrightをインストールする。

npx playwright install

テスト実行

npm run test-storybook --watch

Deploy Storybook

8
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
0