はじめに
こんにちは、エンジニアのkeitaMaxです。
前回の続きです。
前回の記事
今回は以下のURLを参考にして、前回作成したJestを使った自動テストを使用して、GitHub上で自動テストをしてコードカバレッジをとれるようにします。
Codecovに登録する
Codecovに登録します。
GitHubにCodecovをインストールする
登録が終わったら、以下のURLのGitHub app integrationからインストールします。
インストールが終わったらうまくインストールできていることを確認します。
まず、GitHubのページの右上にある自分のアイコンをクリックします。
Settingsを押します。
そこから左のメニューのApplicationsを押すと下のような表示になっていればうまくインストールできています。
CODECOV_TOKENをGitHubに登録する
codecovのサイトに戻ります。
今回実施したいリポジトリを選択します。（もしGitにリポジトリがない人はリポジトリを登録してください）
そうすると、Step1の欄にCODECOV_TOKENがあると思うので、GitHubに登録します。
GitHub ⇒ 今回使用するリポジトリ ⇒ Settings ⇒ Sercrets and variables ⇒ Actions
の順に押していき、New repository secretを押し、CODECOV_TOKENを登録します。
GitHub Actionsを作成する
以前作成した.githb/worlflow配下に新しく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にも以下を追加します。
"test:coverage": "jest --coverage"
実際にGitHub上で動かしてみる
これでGitにPushしてみましょう。
Pushすると以下のようにCodecovが走り始めます。
しばらくすると、以下のようにCodecovの自動テストが完了します。
Codecovのサイトのリポジトリのほうに行くと、コードカバレッジが以下のように取れています。
コードカバレッジを下げてみる
本当に動いているのか確認するために、カバレッジ率を下げてみます。
以前作成したviews/CountView/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,
};
};
この状態でコミットすると、以下のようにカバレッジ率が下がっているというエラーが出ていることがわかります。
これでCodecovが正しく動いていることがわかりました。
おまけ
CodecovのサイトのリポジトリのSettingsのBadges & GraphsのMarkdownをコピーして自分のプロジェクトのReadMeに記載すると、このリポジトリのコードカバレッジが何パーセントかGitHub上から簡単に見れるようになります。
さいごに
コードカバレッジをとれるととても励みになれるのでいいかなと思います。
やり方が違ったり、もっといいやり方があるというご指摘がある方はコメントしていただけると幸いです。
最後まで読んでいただきありがとうございました。
参考文献