testing-libraryなどのパッケージを使ったUIテスト（ユーザーイベントのテスト）と同じようなテストをStoryBookを使って記述することが可能です。
PlayFunctionとは？
StoryBookを使ってユーザーインタラクションテストの実装ができるパッケージです。
インストール
|
1 |
npm i -D @storybook/jest |
storybook用に拡張されたjestをインストールします。
サンプル
以下はFormからテキストボックスのDOMを読み取って初期値が空になっていることをチェックするテストケースです。react-testing-libraryのuser-eventとほぼ同じようにstorybook上で記述することが可能です。（storybookのインタラクションテストの場合は通常のtesting-libraryの時と異なりsetupは不要です。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import Form from "./Form"; import type {Meta,StoryObj} from "@storybook/react" import {within} from "@storybook/testing-library" import {expect} from "@storybook/jest" import { userEvent } from "@storybook/testing-library" const meta = { title: "Form", component: Form, } as Meta<typeof Form>; export default meta; type Story = StoryObj<typeof Form>; export const Default: Story = {} export const Test: Story = { play: async ({canvasElement})=>{ const canvas = within(canvasElement); const input = canvas.getByRole("textbox"); await userEvent.type(input,"aaaa"); await expect(canvas.getByDisplayValue("aaaa")).toBeInTheDocument(); } } |
play
これがPlayFunctionの宣言になります。
canvas
react-testing-libraryのscreenと非常によく似たオブジェクトになります。
実行結果
以下のようにTestというstoryに対してInteractionsというタブを開くとテストが実行されていることがわかります。（テキストボックスへの文字入力のテストをしています。）
注意点
storybookでインタラクションテストを行えることはわかりましたが、通常のjest+testing-libraryの方でも同じことは行えるので重複したテストコードを書かないように注意しましょう。
判断としては、個人的にはtesting-libraryでまずは同じことができないか考えてみるのがよいです。理由としては、hooksなどのテストではtesting-libraryを使うと思うので同じ場所にまとめてしまった方がテストコードの管理面でよいと思われるためです。また、モックも現状だと使えないです。
ただ、Storybookは視覚的に確認しながらテストができるという利点があるのでその点も考慮して実装を検討するのが良いです。
この記事へのコメントはありません。