【Next.js】GitHubで自動テストをしてコードカバレッジをとる


# はじめに

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

前回の続きです。

前回の記事

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

今回は以下のURLを参考にして、前回作成したJestを使った自動テストを使用して、GitHub上で自動テストをしてコードカバレッジをとれるようにします。

https://zenn.dev/tiwu_dev/articles/ea000703b3bdba16778d



# Codecovに登録する

https://about.codecov.io/

Codecovに登録します。


# GitHubにCodecovをインストールする

登録が終わったら、以下のURLの`GitHub app integration`からインストールします。

https://docs.codecov.com/docs/github-2-getting-a-codecov-account-and-uploading-coverage

インストールが終わったらうまくインストールできていることを確認します。

まず、GitHubのページの右上にある自分のアイコンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/c14f3ab1-386d-2021-9d10-7ea9dbfbd47d.png)


Settingsを押します。

そこから左のメニューの`Applications`を押すと下のような表示になっていればうまくインストールできています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/5352b269-4786-55c0-242a-d90f6d773796.png)


# CODECOV_TOKENをGitHubに登録する

codecovのサイトに戻ります。

今回実施したいリポジトリを選択します。（もしGitにリポジトリがない人はリポジトリを登録してください）

そうすると、Step1の欄に`CODECOV_TOKEN`があると思うので、GitHubに登録します。

GitHub ⇒ 今回使用するリポジトリ ⇒ Settings ⇒ Sercrets and variables ⇒ Actions

の順に押していき、`New repository secret`を押し、`CODECOV_TOKEN`を登録します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/784e0e28-592f-1a5d-9265-82288f3c0f72.png)



# GitHub Actionsを作成する

以前作成した`.githb/worlflow`配下に新しく`codecov.yml`を作成します。

```yml:codecov.yml
name: Codecov
on: [pull_request]

jobs:
  codecov:
    name: Codecov
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@master
      - name: Install Dependencies
        run: npm install
      - name: Run Test
        run: npm run test:coverage
      - name: Upload Coverage
        uses: codecov/codecov-action@v1
        with:
          token: ${{ secrets.CODECOV_TOKEN }}
          fail_ci_if_error: 'true'
```

また。`packaage.json`の`scripts`にも以下を追加します。
```json
    "test:coverage": "jest --coverage"
```

# 実際にGitHub上で動かしてみる

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

Pushすると以下のようにCodecovが走り始めます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/ca34b237-8cfb-9bdf-cba7-66c9cfce05e7.png)

しばらくすると、以下のようにCodecovの自動テストが完了します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/a5a7cea5-a313-3fbc-0272-e45385145f6e.png)

`Codecov`のサイトのリポジトリのほうに行くと、コードカバレッジが以下のように取れています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/80ded242-a9e3-7418-e3a4-3e8d72bcc6ea.png)

# コードカバレッジを下げてみる

本当に動いているのか確認するために、カバレッジ率を下げてみます。

以前作成した`views/CountView/hooks.ts`を以下のようにテストで通らないコードを追加してみます。

```ts:hooks.ts
import { useState } from "react";

export const useCountView = () => {
  const [count, setCount] = useState<number>(0);
  const addCount = () => {
    setCount(count + 1);
  };
  // ↓追加
  if(count > 10){
    setCount(count + 10);
  }
  // ↑追加
  return {
    count,
    addCount,
  };
};

```

この状態でコミットすると、以下のようにカバレッジ率が下がっているというエラーが出ていることがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/b1866ee5-b1d0-ddfc-71ed-2ce69c5dd35c.png)

これでCodecovが正しく動いていることがわかりました。



# おまけ

`Codecov`のサイトのリポジトリの`Settings`の`Badges & Graphs`の`Markdown`をコピーして自分のプロジェクトのReadMeに記載すると、このリポジトリのコードカバレッジが何パーセントかGitHub上から簡単に見れるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/03999ed9-db3f-26e8-ac12-94d3ab500fde.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3715123/25bc41f6-13d8-86a7-135f-7d31f2415a6a.png)


# さいごに

コードカバレッジをとれるととても励みになれるのでいいかなと思います。


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

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

# 参考文献

https://zenn.dev/tiwu_dev/articles/ea000703b3bdba16778d

https://zenn.dev/tiwu_dev/articles/ea000703b3bdba16778d

https://zenn.dev/ncdc/articles/codecov_yml_settings


# 次の記事