argTypesRegexの非推奨化による警告の解消

はじめに

Storybook8がリリースされたとのことで、移行。移行にあたり、argtypesRegexが非推奨になっていた。
以下、警告文のコピペ（一部省略）。

% npm run storybook

@storybook/cli v8.0.10

Attention: We've detected that you're using actions.argTypesRegex together with the visual test addon:

<パス省略>/.storybook/preview.ts
  4 | const preview: Preview = {
  5 |     parameters: {
> 6 |         actions: { argTypesRegex: "^on[A-Z].*" },
    |                    ^^^^^^^^^^^^^
  7 |         controls: {
  8 |             matchers: {
  9 |                 color: /(background|color)$/i,

We recommend removing the argTypesRegex and assigning explicit action with the fn function from @storybook/test instead:
https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function

The build used by the addon for snapshot testing doesn't take the regex into account, which can cause hard to debug problems when a snapshot depends on the presence of action props.

環境

OS: macOS Sonoma 14.４.1
Next.js: 14.2.3
Storybook: 8.0.10

以下は、npm listコマンド実行時の出力

% npm list
<パス省略>
├── @chromatic-com/storybook@1.3.3
├── @storybook/addon-essentials@8.0.10
├── @storybook/addon-interactions@8.0.10
├── @storybook/addon-links@8.0.10
├── @storybook/addon-onboarding@8.0.10
├── @storybook/addon-styling-webpack@1.0.0
├── @storybook/addon-themes@8.0.10
├── @storybook/blocks@8.0.10
├── @storybook/nextjs@8.0.10
├── @storybook/react@8.0.10
├── @storybook/test@8.0.10
├── @types/node@20.12.8
├── @types/react-dom@18.3.0
├── @types/react@18.3.1
├── autoprefixer@10.4.19
├── eslint-config-next@14.0.4
├── eslint-plugin-storybook@0.8.0
├── eslint@8.57.0
├── next@14.2.3
├── postcss@8.4.38
├── prettier-plugin-tailwindcss@0.5.14
├── prettier@3.2.5
├── react-dom@18.3.1
├── react@18.3.1
├── storybook@8.0.10
├── tailwindcss@3.4.3
├── tsconfig-paths-webpack-plugin@4.1.0
└── typescript@5.4.5

原因

タイトルにあるように、Storybookが8へ移行するにあたり、argTypesRegexが非推奨になったため。

解決法(It works for me)

.storybook/preview.js の、以下の記述を削除するだけ。

import type { Preview } from "@storybook/react";
import "tailwindcss/tailwind.css";

const preview: Preview = {
    parameters: {
-        actions: { argTypesRegex: "^on[A-Z].*" }

小解説

これだけだと味気ないので、argTypesRegexからの移行前後で異なることを少しだけ。
さて、そもそもpreview.jsで削除した部分はどういうことか。
このような記述のボタンのStorybookファイルがあるとする。

import type { Meta } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Button from './Button';

const meta: Meta<typeof Button> {
  component: Button,
  args: {
    onClick: action('on-click'),
  },
};

export default meta;

このボタンについては、on◯◯ という名前を正規表現で、イベントハンドラー関数として認識する。
これを記述すると、StorybookのログにクリックというイベントをActionsタブで監視できたが、この記法が非推奨となったということ。

では、この記法の代わりにどのように書くかというと、以下のように書く。

import type { Meta } from '@storybook/your-framework';
import { fn } from '@storybook/test'; // ここが違う

import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  args: { onClick: fn() }, // ここが違う
};

export default meta;

@storybook/testパッケージを用いて、fn()を明示し、onClick関数を受け取ることで、モックからonClickのテストをする。
詳しくは公式ドキュメントを参照。
https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function

おわりに

公式ドキュメントを確認する限り、argTypesRegexが非推奨となったのは、argsの記述からイベントハンドラ関数を自動的に推測する記法であるためとのこと。
どうせなら明示してしまった方が間違いは少ないし、いいよねって。