Storybook上でChromatic Visual Testを実施する方法
はじめに
Chromatic Visual Testアドオンを使うと、ローカルのStorybook内で簡単に表示確認テストを行うことが可能です。
Chromatic Visual Testを実施するには、Storybookのバージョンを7.6以上にする必要があります。
今回のブログでは、Chromatic Visual Testアドンの導入までの過程で起きたエラー、ワーニング対応、Chromaticの設定方法などを記述していきたいと思います。
Storybookのバージョンの最新化（v7からv8）
まず、Storybookを最新にします。
npx storybook@latest upgrade基本的には、自動で最新版にマイグレーション対応してくれますが、手動でv8対応が必要な箇所もありました。
Storybookのバージョンアップで発生したエラー解消
Storybook v8では、argTypesRegexが非推奨になったため、argTypesRegexの記述は削除します。
//argTypesRegexエラー
Attention: We've detected that you're using argTypesRegex: │
│ │
│ .storybook/preview.js │
│ 6 | const preview = { │
│ 7 | parameters: { │
│ > 8 | actions: { argTypesRegex: "^on[A-Z].*" }, │
│ | ^^^^^^^^^^^^^ │
│ 9 | controls: { │
│ 10 | matchers: { │
│ 11 | color: /(background|color)$/i, Storybook v8ではMDXからCSF（Component Story Format）形式に書き換える必要があります。
下記コマンドを実行してファイルを書き換えました。
# Convert stories in MDX to CSF
yarn dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx" ERR ./src/stories/mdx/color.stories.mdx Transformation error (Unexpected token (5:0))
SyntaxError: Unexpected token (5:0)
at constructor (/Users/[UserName]/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@babel/parser/lib/index.js:351:19)
at TypeScriptParserMixin.raise (/Users/[UserName]/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@babel/parser/lib/index.js:3281:19)
at TypeScriptParserMixin.unexpected (/Users/[UserName]/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@babel/parser/lib/index.js:3301:16)
at TypeScriptParserMixin.parseExprAtom (/Users/[UserName]/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@babel/parser/lib/index.js:10945:16)
at TypeScriptParserMixin.parseExprAtom (/Users/[UserName]/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@babel/parser/lib/index.js:6829:20)
at TypeScriptParserMixin.parseExprSubscripts (/Users/[UserName]/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@babel/parser/lib/index.js:10607:23)
at TypeScriptParserMixin.parseUpdate (/Users/[UserName]/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@babel/parser/lib/index.js:10590:21)
at TypeScriptParserMixin.parseMaybeUnary (/Users/[UserName]/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@babel/parser/lib/index.js:10568:23)
at TypeScriptParserMixin.parseMaybeUnary (/Users/[UserName]/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@babel/parser/lib/index.js:9478:18)
at TypeScriptParserMixin.parseMaybeUnaryOrPrivate (/Users/[UserName]/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@babel/parser/lib/index.js:10422:61)
All done. v8非対応のアドオンなどもあり、いくつかワーニングが出ているアドオンがありましたが、
必要なアドオンの整理も兼ねて一旦削除しました。
下記がワーニングが出ていたアドオンです。
main.jsから削除
- whitespace/storybook-addon-html
- storybook/addon-mdx-gfm
- storybook/addon-styling
- whitespace/storybook-addon-html": "^5.1.4"
- storybook-readme": "^5.0.9"
- storybook/addon-mdx-gfm": "^8.0.9"
- storybook/addon-styling": "^1.3.7"
Chromatic Visual Testアドオンのインストール
Storybookの最新化が完了したら、アドオンをインストールします。
yarn add --dev @chromatic-com/storybookChromatic Visual Testアドオンがインストールされると、Visual Testsというタブが追加されます。三角マークのボタンを押せばテストが実行されるようになります。
Visual Testsタブ上に差分が表示されるため、意図した修正であればAcceptボタンで承認することができます。
Chromatic Visual Testの設定
Desktop・Laptop・Mobileサイズ、ブラウザ通常モード・ダークモードなど異なる設定でのテストが可能です。
まず、.storybookディレクトリ配下にmode.tsファイルを追加します。このファイルにはviewportタイプや背景色などの設定が可能です。
今回は、Desktop・Tablet・Mobileサイズの設定を追加します。
// .storybook/modes.ts
export const allModes = {
mobile: {
viewport: "mobile",
},
tablet: {
viewport: "tablet",
},
desktop: {
viewport: "desktop",
},
};
次に、.storybookディレクトリ配下にpreview.tsを追加します。
テストしたいviewportsをchromaticのモードにそれぞれ設定します。
// .storybook/preview.ts
/** @type { import('@storybook/html').Preview } */
import "../src/assets/css/style.scss";
import "../src/main";
import { allModes } from "./modes";
import { Preview } from "@storybook/html"; // Import the Preview type
const preview: Preview = {
parameters: {
chromatic: {
modes: {
mobile: allModes["mobile"],
tablet: allModes["tablet"],
desktop: allModes["desktop"],
},
},
viewport: {
viewports: {
mobile: { name: "Mobile", styles: { width: "375px", height: "667px" } },
tablet: {
name: "Tablet",
styles: { width: "768px", height: "1024px" },
},
desktop: {
name: "Desktop",
styles: { width: "1440px", height: "990px" },
},
},
},
},
};
export default preview;設定後、Storybookを立ち上げると、viewportのモード設定が追加されているのが確認できます。設定したdesktop・tablet・mobileのサイズでそれぞれ表示確認することが可能です。
最後に
v7からv8へのバージョンアップで少し苦戦してしまいましたが、無事にChromatic Visual Testアドオンを追加することができました。
