CSF3.0, testing-library, regsuitで快適フロントテスト始め

はじめに

去年末までのリリース(ver6.4)により、正式にstoryがより簡単に書けるようになったことに加えて、intercative storyを記述できるようになりました。

これによって、jestでのtestにstoryが再利用可能になり、snapshotテストで確認できるテストケースが広がりました。

https://storybook.js.org/blog/component-story-format-3-0/

https://storybook.js.org/blog/interactive-stories-beta/

実践

今回はinputコンポーネントを使って、storybookとtestを記述してみます

// input.stories.tsx
import { ComponentMeta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { Input, InputProps } from '.';

export default {
  title: 'designed-components/Input',
  component: Input,
} as ComponentMeta<typeof Input>;

const focus = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  canvas.getByPlaceholderText('Placeholder').focus();
};

const typeAndBlur = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  await userEvent.type(canvas.getByPlaceholderText('Placeholder'), 'Text');
  canvas.getByPlaceholderText('Placeholder').blur();
};

export const Default: StoryObj<InputProps> = {
  args: {
    placeholder: 'Placeholder',
  },
};

export const Focused = {
  ...Default,
  play: focus,
};

export const Typed = {
  ...Default,
  play: typeAndBlur,
};

// input.test.ts
import { composeStories } from '@storybook/testing-react';
import { render, screen } from '@testing-library/react';
import * as stories from './Input.stories';

describe('designed-components/Input', () => {
  const {  Typed } = composeStories(stories);

  test('入力可能', async () => {
    const { container } = render(<Typed />);

    await Typed.play({ canvasElement: container });

    const inputElement = screen.getByPlaceholderText('Placeholder') as HTMLInputElement;

    expect(inputElement.value).toBe('Text');
  });
});

結果

regsuitでのsnapshot結果として、以下のようにplay関数で記述したinteractionの実行結果後の状態でスクリーンショットが撮影されます。
これによって、コンポーネントに対する、入力、Focus、などユーザーの操作結果の状態の変更を担保することが可能になります。

また、jestでのtestに関しても、Typedストーリーを再利用することで、そこに記述されたinteraction結果についての検証ができます。

jest実行結果

Default

Focused

Typed

まとめ

CSF3.0で記述したstoryを利用して、user interaction の結果をvisualでも、単体でも簡単にテストできることを示すことができました。

ちなみに、社内で導入したコードにおいて、mswによるapollo経由のデータ取得のmockが描画された状態を問題なくvisualテストできていることも確認しています。

実際にこのセットアップを試してみて、
interaction storyがあることがstorybook駆動開発の体験を向上させてくれていること
storybook駆動に開発すること自体が、それなりに網羅性のあるテストになること
interaction storyがほぼ単体テストも兼ねていることで、snapshotテストだけで十分なケースも多々ありそうなこと

などから、かなりフロントエンドにおけるテスト体験を引き上げたものだと思っており
ドメイン知識を取り入れたATDDにも上手く活かせそうな気がして、モチベが湧いています。