StoryBookのインタラクションテスト

testing-libraryなどのパッケージを使ったUIテスト（ユーザーイベントのテスト）と同じようなテストをStoryBookを使って記述することが可能です。

PlayFunctionとは？

StoryBookを使ってユーザーインタラクションテストの実装ができるパッケージです。

インストール

npm i -D @storybook/jest

1	npm i -D @storybook/jest

storybook用に拡張されたjestをインストールします。

サンプル

以下はFormからテキストボックスのDOMを読み取って初期値が空になっていることをチェックするテストケースです。react-testing-libraryのuser-eventとほぼ同じようにstorybook上で記述することが可能です。（storybookのインタラクションテストの場合は通常のtesting-libraryの時と異なりsetupは不要です。）

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();
    }
}

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は視覚的に確認しながらテストができるという利点があるのでその点も考慮して実装を検討するのが良いです。