ChromaticとstorybookでUIのテストを自動化してみた
やったこと
storybook + chromatic + githubActionでUIのテストを自動化させました。
今回mainとdevelopブランチにpull requestが行われた場合に実行させるようにしたので、手順を記事にします。
手順
chromaticのセットアップ
chromaticとは、storybookのメンテナーが作っているstorybookをホスティングするサービスです。加えてgithubと連携することで、PRと連携してUIのreviewを効率化してくれます。
現状、似たようなサービスとしてNetlifyがよく使われているように思われますが、storybookとの親和性という観点ではchromaticに軍配が上がりそうです。
早速下記リンクから、github連携でアカウントを作りrepoを連携させましょう。
インストール,buildの確認
# Yarn
yarn add --dev chromatic
# npm
npm install --save-dev chromatic
# build確認
npx chromatic --project-token <your-project-token>
リンクから正しく閲覧できることを確認してください。
githubActionで自動化していく
documentをベースにワークフローをカスタマイズします。
# .github/workflows/chromatic.yml
# Workflow name
name: 'Chromatic'
# Event for the workflow
on:
pullrequest
- main
- develop
# List of jobs
jobs:
chromatic-deployment:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- name: Install dependencies
run: yarn
- name: Publish to Chromatic
uses: chromaui/action@v1
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}# githubに登録させる必要あり。
exitZeroOnChanges: true
あとはpushして、対象ブランチにPR出せば実行されます。 また、chromatic上でもgithubと連動したような動きになります。
ハマった部分
chromaticの部分が原因ではないですが、そのままうまく実行されませんでした。
試行錯誤した部分を追記しておきます。
tailwind cssが反映されない
storybookをbuildしたけど、スタイルが適用されませんでした。
tailwind.config.jsのpurge部分にsrcが全て入っていないことが原因でしたのでそれを対応。
postcss
storybookの設定が不十分でした。
firebaseの記法
ドキュメントを先に作ってから値をセットしていました。
const hogehoge = firestore.collection("hogehoge").doc(uid)
await hogehoge.set(〜〜〜〜〜)
しかし、Cannot read property 'collection' of undefinedとエラーが吐かれていたので、一行にまとめました。
await firestore.collection("hogehoge")
.doc(uid).set(〜〜〜〜〜)
実際には機能するのですが、buildできなければ仕方ないので、書き方を変更します。
ハマった部分は全体としてstorybookとかtailwindで、今回と関係ない部分でのセットアップが甘かったです。😅
参考にしたリンク
Discussion