【Next.js】Storybookで書いたテストを、GitHub上で自動でテストする

# はじめに

こんにちは、エンジニアのkeitaMaxです。

前回の続きです。

前回の記事

https://qiita.com/keitaMax/items/2a609a0e310375a2debd

今回は、SotrybookをGitHubにプッシュした際に自動でデプロイをして、UIの変更などを自動でテストして教えてもらう機能を作成していきたいと思います。


主に以下のURLをもとに作成していきたいと思います。Chromaticを使用します。

https://zenn.dev/keitakn/articles/storybook-deploy-to-chromatic

# Chromaticとは何か

>Chromatic は、ブラウザー間で考えられるすべての UI 状態をスキャンして、視覚的および機能的なバグを検出するビジュアル テストおよびレビュー ツールです。レビュー担当者を割り当て、ディスカッションを解決して、チームの承認を効率化します。
(引用元：https://www.chromatic.com/)

Chromaticとは、Storybookをデプロイして、UIのテストを自動でしてくれたり、UIを簡単に共有することができるようになるツールです。

# Chromaticに登録する

まずはChromatic登録します。以下のURLのサイトに登録します。

https://www.chromatic.com/

登録が完了すると、以下のようにインストールを促されるので、コマンドをたたいてインストールします。

```
npm install --save-dev chromatic
npx chromatic --project-token={トークン}
```

すると、`package.json`に

```
"chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
```

と行が追加されています。


`CHROMATIC_PROJECT_TOKEN`の部分はPrivateなトークンなので、ここには載せておりません。

また、Gitには上げないようにしてください。

# Gitにトークンを設定

このトークンを以下のURLを参考にGitに設定します。

https://docs.github.com/ja/actions/security-guides/using-secrets-in-github-actions

Gitの自動テストをするリポジトリの設定を開きます。

その後、`Secrets and variables`>`Actions`>`Repository secrets`に設定します。

# GitHub Actionsを設定

`.github/worlflow/chromatic.yml`ファイルを作成します。

```yaml:chromatic.yml
name: Chromatic

on: [pull_request]

jobs:
  chromatic-deployment:
    name: Deploy Storybook to chromatic
    runs-on: ubuntu-latest
    timeout-minutes: 7
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - name: Install dependencies
        run: npm ci
      - name: Publish to Chromatic
        uses: chromaui/action@v1
        with:
          token: ${{ secrets.github_token }}
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
```

これでGitにPushしてみましょう。

するとGitでは以下のような表示になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/aa161115-8a9b-4d68-62da-8a573acb748a.png)

UI Testsだけチェックが入っていませんが、これは前回とUIが変わった場所があるため、確認してくれと言っています。
`Details`を押してみると以下のようになっています。


![www.chromatic.com_build_appId=65da171692486208618c7406&number=2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/8b7a1054-f4c9-7fde-0324-cce14b8b074e.png)

この画面の`verify change`から`Accept`を押して変更を承認します。

その後、プルリクに戻るとすべてにチェックが付き、マージできる状態になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/17ee1801-9f01-204c-934d-dafc1cb09b43.png)

# 前に書いたStorybookのテストを失敗させてみる

前々回くらいにStorybookで書いたテストを失敗させてみようと思います。

Storybookの自動テストは以下の記事で作成しました。

https://qiita.com/keitaMax/items/5698eb72106c1fd1397b

成功していたテストコードを以下のように修正してみます。

```react:index.stories
import { expect } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { screen, userEvent } from '@storybook/testing-library';
import { CountView } from '.';

const meta: Meta<typeof CountView> = {
  title: 'views/CountView',
  component: CountView,
  tags: ['autodocs'],
}
export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    
  },
  render: function Render() {
    return <CountView />
  },
}
Default.play = async () => {
  const button = await screen.findByTestId('button');
  expect(button).toBeInTheDocument();
  expect(screen.queryByTestId('countText')?.innerHTML).toBe("2"); //ここを修正 正しくは"0"になる
  await userEvent.click(button);
  expect(screen.queryByTestId('countText')?.innerHTML).toBe("1");
}
```

この状態でPushして自動テストを走らせてみます。すると以下のようにテストが失敗します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/4bef6d5e-aec4-5ae6-98b2-057c6dfe93a4.png)


ここの`UI Test`の横の`Details`を押すと、先ほど修正したコードでエラーになっているよというようなメッセージが出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/d282556b-439a-aec7-ba89-c4866ef46c52.png)

これを、正しく動く状態にしてPushしてみます。

すると以下のように自動テストが成功し、マージできる状態になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/2633dc94-f7f1-8681-b608-aa82f6684484.png)

これでNext.jsのStorybookを使用した自動テストをGitHub上で動かせるようになりました。


# さいごに

思ったより自動テストは楽に導入することができました。

これからはNext.jsでできる自動テストを増やしていくのと、バックエンド側のPHPなどでも自動テストを導入していきたいと思います。

また、後々自動デプロイのほうもやっていこうと思っています。

やり方が違ったり、もっといいやり方があるというご指摘がある方はコメントしていただけると幸いです。

最後まで読んでいただきありがとうございました。


# 参考文献

https://zenn.dev/keitakn/articles/storybook-deploy-to-chromatic

# 次の記事

https://qiita.com/keitaMax/items/fdf8fa7bc6865659e612