slides.md

theme	class	highlighter	info	drawings	css	layout	image
geist	text-center	shiki	## Slidev Starter Template Presentation slides for developers. Learn more at [Sli.dev](https://sli.dev)	persist	unocss	image	/book.jpg

テストに用いるStorybook

---

---

自己紹介

小張 泰志(こばり たいし)

・21卒

・フロントエンド

最近熱くなったこと

・WBC優勝

---

layout: two-cols

Storybookとは

UIコンポーネントを可視化するツール

・デザイナー、PdMとの共有

・テストができる←今日話すこと

::right::

<style> h1 { color: #FE4785 } </style>

---

layout: two-cols

play functionを使う

// ReportFiltersCheckbox.stories.tsx
export const UncheckAll = {
  name: '全てのチェックを外せること',
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    // 全てのチェックを外す
    await userEvent.click(
      canvas.getByRole('checkbox', { name: 'パブリシティ' }),
    );
    await userEvent.click(
      canvas.getByRole('checkbox', { name: 'パブリシティ転載' }),
    );
    await userEvent.click(
      canvas.getByRole('checkbox', { name: 'リリース原文転載' }),
    );
  },
} satisfies Story;

::right::

<style> .slidev-layout { gap: 8px } </style>

---

layout: two-cols

<style> .col-right { display: flex; flex-direction: column; justify-content: center; } </style>

Storyをテストファイルに読み込む

assertは vitestで行う

・Storybookをbuildせずに実行できるので速い

・mockが使える

::right::

// ReportFiltersCheckbox.test.tsx
import { composeStories } from '@storybook/react';
import { render } from '@testing-library/react';
import * as stories from './ReportFiltersCheckbox.stories';

const { UncheckAll } = composeStories(stories);

it('全てのチェックを外せること', async () => {
  const { container, getByRole } = render(<UncheckAll />);
  await UncheckAll.play({ canvasElement: container });
  expect(getByRole('checkbox', { name: 'パブリシティ' })).not.toBeChecked();
  expect(
    getByRole('checkbox', { name: 'パブリシティ転載' }),
  ).not.toBeChecked();
  expect(
    getByRole('checkbox', { name: 'リリース原文転載' }),
  ).not.toBeChecked();
});

---

導入した目的とそのギャップ

1. play functionによるテストの可視化

達成できた

2. Figmaプラグインの導入

実装とFigmaのズレを減らしたかった

Chromaticを導入しないといけなかったので断念

3. VRT

今後進めていきたい

<style> h1 { margin-top: 1rem } </style>

---

意外な恩恵

・ユニットテストのデバッグが楽になった

・AAA(Arrange, Act, Assert)を意識するようになった

Assertを独立して書くので、テストの意図が明確になった。

Assert後にActするようなパターンも書きづらくなった。

---

今後の課題

データ取得するコンポーネントのStorybook化

mswなどを使ってmockできる部分とそうでない部分がある

どこまでを Storybook に書くのか

・境界があいまい

・すべてを Storybook に寄せることは不可能

・mockがStorybookに導入されたら？

We have a long list of quality of life improvements here that we’ll be rolling out in 7.x, especially around better mocking, full page testing, and compatibility.¹

<style> h1 { margin-top: 1rem } </style>

---

今までのStorybookの使い方と比較して

今まで：実装者以外とのコミュニケーションとしてのツール

ただ、、、

デザイナーは figma を見るし、QA は staging を見る

エンジニアもそんなに Storybook を見ない

テストツールとして活用後

エンジニアがStorybookを見る機会が増えた

・バックエンドができるまでの開発

・テストの説明

<style> h1 { margin-top: 1rem } </style>

---

まとめ

Storybookをテストに活用して、テストが可視化された

まだ道半ば🛣️

・VRTの導入

・Storybookのアップデートにも注視していきたい

---

layout: center

ご清聴ありがとうございました✨

Footnotes

1. Storybook 7.0 ↩