ReactアプリをCircleCIと連携させ、自動テストを実行するCIを構築する

CircleCIの入門として、公式の"Getting Started Introduction"の次に実際に何かしらのプロジェクトの自動テストを実行できるようにしてみようと考え、Reactアプリの自動テストを実行できるようにしてみました。

## create-react-appでtypescriptの入ったreact appを作成する

まずはcreate-react-appで簡単なアプリを作ります。

```bash

create-react-app react-app-circleci-integration-example --typescript
```

コマンドが完了すると、下記の`src/`ディレクトリを含むプロジェクトが生成されます。
テストファイルが既に含まれているため、ひとまずテストを自前で書く必要はありません(後ほどCircleCIを導入した後に、失敗するテストを追加しテストがfailedすることを確認してみます)。

```bash

src
├── App.css
├── App.test.tsx
├── App.tsx
├── index.css
├── index.tsx
├── logo.svg
├── react-app-env.d.ts
└── serviceWorker.ts
```

ここまでできたら、GitHub上に生成したアプリをpushしておきます。

## CircleCIを導入する
次にプロジェクトにCircleCIを連携します。
まずはプロジェクト側でCircleCIの実行設定を記述する必要があるので追加します。

### .circleci/config.ymlを追加する

`circleci/config.yml`をプロジェクトに追加し、一旦公式のチュートリアル通りのyamlを書きます。

```yaml

version: 2
jobs:
    one:
        docker:
            image: circleci/ruby:2.4.1
        steps:
            checkout
            run: echo "A first hello"
            run: mkdir -p my_workspace
            run: echo "Trying out workspaces" > my_workspace/echo-output
            persist_to_workspace:
                # Must be an absolute path, or relative path from working_directory
                root: my_workspace
                # Must be relative path from root
                paths:
                    echo-output
    two:
        docker:
            image: circleci/ruby:2.4.1
        steps:
            checkout
            run: echo "A more familiar hi"
            attach_workspace:
                # Must be absolute path or relative path from working_directory
                at: my_workspace
            run: |
                if [[ $(cat my_workspace/echo-output) == "Trying out workspaces" ]]; then
                    echo "It worked!";
                else
                    echo "Nope!"; exit 1
                fi
workflows:
    version: 2
    one_and_two:
        jobs:
            one
            two:
                requires:
                    one
```

### CircleCI側にプロジェクトを追加する
次にCircleCIのwebアプリの左メニューにある"ADD PROJECTS"を選択し、表示されるリポジトリ一覧からCICDを実行したいリポジトリを見つけ、"Set Up Project"をクリックします。
セットアップ画面では設定を全てデフォルトのままにし、"Start building"をクリック。
対象のブランチに記述されている`.circleci/config.yml`の設定でCIが実行されます。
最初のJOBがSUCCESSになれば、自動テスト導入の準備完了です。

## yarn testをCircleCIのjob上で実行させ、自動テストを実現する
次にReactのテストを自動実行するためのJobをconfig.ymlに記載します。

```yaml

version: 2
jobs:
    test_frontend:
        docker:
            - image: circleci/node
    steps:
        - checkout
        - run: yarn install
        - run: yarn test
workflows:
    version: 2
    run_test:
        jobs:
            - test_frontend
```

ここで変更した内容は下記となっています。

- docker imageを`circle/node`に変更
> CircleCI が提供しているビルド済み Docker イメージでは、Node.js イメージ (circleci/node) に Yarn がプリインストールされています。
https://circleci.com/docs/ja/2.0/yarn/#circleci-%E3%81%A7%E3%81%AE-yarn-%E3%81%AE%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95

- yarn installを実行し、テストの実行に必要なパッケージをインストール
- yarn testを実行

GitHubへブランチをpushするとjobが実行、テストも実行されることが分かります。

### 失敗するテストを記述し、CIをfailedさせてみる
テストが成功するようになったので、今度は失敗するコードを記述してみます。

```
it ('will be absolutely failed', () => {
expect("This message is ").toBe("not same.")
})
```

ローカルでテストが失敗することを確認した後、branchをpushして、実行されたjobをみると、failedしていて、テストが失敗するとcircleCI上でもfailedになっていますね！