storybook/jest、storybook/testing-libraryからstorybook/testに移行する #TypeScript

storybook/test

Storybookのバージョン7.6から新たに@storybook/testを利用できるようになりました。
これまで、Storybook上でテストを記述するときは@storybook/jestや@storybook/testing-libraryを用いていましたが、今後は@storybook/testに統合して利用することができます。
@storybook/testはVitestをベースに作られており(組み込まれているわけではありません)、パッケージの合理化、サイズが縮小・ロード時間を短縮などさまざまな点でパワーアップしています。
@storybook/testでは、Vitestで利用できる幾つかのメソッドが活用できます。

import {expect, fn, spyOn, isMockFunction, spies } from '@storybook/test'

これまではモックを利用したテストがStorybookのツールを使ってうまくできなかったのでfnなどを用いて綺麗にできるようになったのが大変良い変更だなと思いました。

import Button from './button'

import type { Meta, StoryObj } from '@storybook/react'
import { within, userEvent, expect, fn } from '@storybook/test';

const meta: Meta<typeof Button> =  {
  component: Button,
  args: {
    onClick: fn(),
  },
};

export default meta;

export const Default: StoryObj<typeof Button> = {
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button'));
    await expect(args.onClick).toHaveBeenCalled();
  },
};

移行

storybookを最新バージョン(7.6以上)にあげます。

npx storybook upgrade

そして、@storybook/jestと@storybook/testing-libraryを消します。

npm uninstall @storybook/jest @storybook/testing-library

削除できたら@storybook/testをインストールします。

npm i -D @storybook/test

その後全てのテストファイルで、@storybook/jestと@storybook/testing-libraryからインポートしているところから@storybook/testに置き換えることで移行は完了です。