LoginSignup
1
3

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

Posted at

はじめに

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

前回の続きです。

前回の記事

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

Codecovに登録する

Codecovに登録します。

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

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

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

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

image.png

Settingsを押します。

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

image.png

CODECOV_TOKENをGitHubに登録する

codecovのサイトに戻ります。

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

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

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

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

image.png

GitHub Actionsを作成する

以前作成した.githb/worlflow配下に新しくcodecov.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.jsonscriptsにも以下を追加します。

    "test:coverage": "jest --coverage"

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

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

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

image.png

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

image.png

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

image.png

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

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

以前作成したviews/CountView/hooks.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

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

おまけ

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

image.png

image.png

さいごに

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

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

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

参考文献

次の記事

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3