create-react-appで作ったReactプロジェクトにPuppeteerでE2Eテストを追加してCircle CIでまわす

長いタイトルですが、要はそういうことです。

経緯

• create-react-appでReactアプリを作ろう
• Circle CIでユニットテストとかデプロイまわそう
• PuppeteerでE2Eのテストもできるらしい！
• じゃあCircle CIでそれもテストしようぜ！

準備

まずは必要なライブラリとファイルを用意します。

# パッケージの追加
$ npm i -D rimraf puppeteer jest jest-puppeteer

# 実行ファイル
$ touch e2e.sh

# テストコード
$ mkdir __tests__
$ touch __tests__/test.spec.js __tests__/jest.config.js

実装

テストコードの作成

まずはテストコードを用意します。

__tests__/test.spec.js

/* global page: true */
describe('app', () => {
  beforeEach(async () => {
    await page.goto('https://127.0.0.1:3000');
  });

  it('should show sign in page without crashing', async () => {
    await expect(page).toMatch('Sign');
  });
});

ここではhttps://127.0.0.1:3000へアクセスし、その後「ページに’Sign’という文字列が含まれているか？」というテストを実行しています。

１つのページに対して複数のテストを実行したい場合、beforeやbeforeEachを使ってアクセス回数を減らすことで実行時間を節約できます。

テスト実行ファイルの作成

続いてテストを実行するスクリプトを用意します。Jestの設定や、Circle CIでテストする際に必要なライブラリを追加したりします。

__tests__/jest.config.js

module.exports = {
  preset: 'jest-puppeteer',
  testRegex: './*\\.spec\\.js$',
};

e2e.sh

#!/bin/bash
npm run build
sudo apt-get update
sudo apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
  libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
  libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 \
  libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \
  ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
sudo npm i -g http-server
http-server -p 3001 ./build &
npm run test:e2e
pkill -f http-server

package.json

e2eテストのためのコマンドをいれておきましょう。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "test:e2e": "./node_modules/.bin/jest -c __tests__/jest.config.js"
  },
  "dependencies": {

.ciecleci/config.yml

作成した実行ファイルをrunするようにしましょう。

version: 2
jobs:
  build:
    docker:
      # 今使っているバージョンに`-browsers`を追加する
      - image: circleci/node:8.11-browsers
    steps:
...
      - run:
          name: e2e test
          command: |
            ./test.e2e.sh
...

ここまで準備ができれば、あとはCircle CIが「ソースをビルド -> サーバー起動 -> Puppeteerでテスト]までを実行してくれるようになります。

実戦投入する際には

E2Eをコミット毎に実行するのはどう考えても非効率です。

ですので実戦投入する際には、Circle CIのワークフローを利用してgit tagや特定のブランチなど限定にするとよいでしょう。

Netlifyへのデプロイであれば以下のようなフローも考えられます。

• draftでリリース
• E2Eテストを実行
• 成功したらdraftをpublishする

それではよいReactライフを！