More than 1 year has passed since last update.

Github の Readme に Coverage badge を付ける

Last updated at 2023-07-20Posted at 2022-11-22

更新履歴

2023/07/23 nyc 関係を更新

目的

github の ReadMe に coverage badge を表示したい

前提

Node.jsの環境構築済み
GitとGithubの環境構築済み

環境

Windows - v11
Node.js - v16
nyc - v15
mocha - v10
chai - v4
Coveralls - v3
Github Actions

結論

こうする。

package.json

}
  "scripts": {
    "pretest": "rm -rf .nyc_output",
    "test": "nyc mocha -R spec",
    "precoverage": "rm -rf coverage && mkdir coverage",
    "coverage": "npm run test && nyc report --reporter=lcovonly"
  },
  "devDependencies": {
    "chai": "^4.3.7",
    "coveralls": "^3.1.1",
    "mocha": "^10.1.0",
    "nyc": "^15.1.0"
  }
}

.nycrc

{
  "reporter": [
    "text-summary"
  ],
  "extension": [
    ".js",
    ".cjs",
    ".mjs",
    ".ts"
  ],
  "exclude": [
    "**/test/**.spec.js"
  ]
}

.github/workflow/coverage-badge.yml

name: Coveralls GitHub Action

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
  workflow_dispatch:

jobs:
  test:
    runs-on: windows-latest

    strategy:
      matrix:
        node-version: [15.x, 16.x] # (need)

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }} # (need)
          cache: "npm"
          cache-dependency-path: "**/package-lock.json"

      - run: npm ci # (need) # better than "npm install"
      - run: npm run coverage # (need)

      - name: Coveralls GitHub Action
        uses: coverallsapp/github-action@1.1.3 # (need)
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }} # (need)

README.md

[![Coverage Status](https://coveralls.io/repos/github/[user]/coverage-badge-test/badge.svg?branch=main)](https://coveralls.io/github/[user]/coverage-badge-test?branch=main)

・・・ 以下 REAMDE 本文 ・・・

詳細

Test runner : mocha (NPM)
assertion library : Chai (NPM)
coverage tool : nyc (NPM)
coverage badge : coveralls (NPM)

1. nyc + mocha + chai のセットアップ

1.1. install

gitbash

$ npm install mocha --save-dev
$ npm install chai --save-dev
$ npm install nyc --save-dev

1.2. テスト対象の実行ファイルを作成

内容は適当。

index.js

module.exports = () => {
  console.log("Hallow World");
};

1.3. テストスクリプトの作成

デフォルトのファイル構成

test
- index.spec.js

内容は適当に。

test/index.spec.js

const { describe, it } = require("mocha");
const { assert } = require("chai");

describe("test index", () => {
  const index = require("../index");

  it("index is function", () => {
    assert.isFunction(index);
  });
});

1.4. npm run script を作成

以下の様にnycを噛ませてcoverageが出力される様にする。

package.json

{
  "scripts":{
    "test": "nyc mocha -R spec"
  }
}

1.4. テストの実行確認

スクリプトを実行

gitbash

$ npm run test

以下の様にcoverageが表示されれば、一旦OK

gitbash

> nyc mocha -R spec

  test index
    ✔ index is function

  1 passing (6ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |      50 |      100 |       0 |      50 |
 index.js |      50 |      100 |       0 |      50 | 2
----------|---------|----------|---------|---------|-------------------

情報
nycでcoverageを出力すると、以下の様に.nyc_outputディレクトリが自動生成されますが、coverageの生データであり、気にする必要はありません。(temp-dir:"./.nyc_output"(参考：github))

.nyc_output

2. `Coveralls`をセットアップ

2.1. `coveralls.io`にアカウントを作成する

リンク：Coveralls.io

公開リポジトリ＋OSSであれば、無料。

2.2. `coveralls.io`と`Github`を連携する

Coveralls.ioからGithubにHTTPリクエストが発生するので、その認証が必要。らしい。

連携が出来ていれば、coveralls.ioのアカウントページにGithubのプロフィールアイコンが表示される。ハズ。

2.3. `Coveralls.io`と`Github`の各リポジトリを紐づけする

このページに行くと、Githubの個人リポジトリの一覧が表示されるので、

coverage-badgeを出力したいリポジトリ（今いじっているリポジトリ）を OFF → ON に切り替える。まだリモートリポジトリを作って無いのならこのタイミングGithubに作成しちゃいましょう。

2.4. install

gitbash

$ npm install --save-dev coveralls

2.5. npm run script を作成する

coverallsが読み込み可能なcoverage-reportが出力される様にする必要がある。

package.json

{
  "scripts":{
    "test": "nyc mocha -R spec",
+   "precoverage": "rm -rf coverage && mkdir coverage",
+   "coverage": "npm run test && nyc report --reporter=lcovonly"
  }
}

解説

coverage-reportはcoverallsの仕様上./coverage/lcov.infoファイルにtext-lcov形式で出力される必要がある。ファイルパスが一致しない場合はError: Lcov file not found.を出力して終了する。
nycのreporterはファイル形式、出力ディレクトリの指定はできるが、ファイル名の指定が出来ない。また、出力場所を指定したとしてもそのディレクトリが無い場合、エラーを出力して終了する。
上記の理由から、まず出力場所である./coverageディレクトリを作成する必要がある。rm -rf coverage && mkdir coverage
- MakeFileでやれ的な説明が多いが、コマンドラインから直接作っても動作した
node-coverallsのgithubにはnyc npm test && nyc report --reporter=text-lcov | coverallsと書かれているが、それだと"Error : Failed to parse stringが出力され終了してしまう。

gitbash

[error] "2022-11-22T09:33:14.585Z"  'error from lcovParse: ' 'Failed to parse string'
[error] "2022-11-22T09:33:14.588Z"  'input: ' ''
[error] "2022-11-22T09:33:14.588Z"  'error from convertLcovToCoveralls'

C:\Users\[user]\workSpace\coverage-badge-test\node_modules\coveralls\bin\coveralls.js:19
      throw err;
      ^
Failed to parse string
(Use `node --trace-uncaught ...` to show where the exception was thrown)

なので、npm scriptではreporterの出力までを行い、あとはgithub-actionsに任せるのが良い。

2.6. `reporter`の実行確認

以下を実行

gitbash

$ npm run coverage-reporter

以下の様になればOK。

gitbash

> rm -rf coverage && mkdir coverage

> npm run test && nyc report --reporter=lcovonly

> rm -rf .nyc_output

> nyc mocha -R spec

  test index
    ✔ index is function

  1 passing (6ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |      50 |      100 |       0 |      50 |
 index.js |      50 |      100 |       0 |      50 | 2
----------|---------|----------|---------|---------|-------------------

確認
./coverage/lcov.infoファイルが作成されているか確認する。

coverage
- lcov.info

lcov.info

TN:
SF:index.js
FN:1,(anonymous_0)
FNF:1
FNH:0
FNDA:0,(anonymous_0)
DA:1,1
DA:2,0
LF:2
LH:1
BRF:0
BRH:0
end_of_record

3. `Github Actions`を作成する

本ページ内の結論に書いた.github/workflow/coverage-badge.yml。

3.1. `Github Action`を実行

Githubのリモートリポジトリに今いじっているローカルリポジトリをpushして確認。

リポジトリ内の上部にある「Actions」を押下
Actionisページ内の左部にある「Coveralls Github Action」を押下
ページ右部の「Run workflow▼」→「Run Workflow」を押下
経過ログも見れるし、終了した後でもそのログを参照可能

4. README にバッジを埋め込む

本ページ内の結論に書いたREADME.md。

READMEに貼り付けるMarkdownは、coveralls.ioのREPOSのページ内にあるBUILD #***のリンクを踏んだ先にある各ビルド毎のcoverage詳細ページにある「EMBED▼」ボタンからジェネレートできる。

こんな感じになればOK

了

参考リンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Github の Readme に Coverage badge を付ける

目的

前提

環境

結論

詳細

1. nyc + mocha + chai のセットアップ

1.1. install

1.2. テスト対象の実行ファイルを作成

1.3. テストスクリプトの作成

1.4. npm run script を作成

1.4. テストの実行確認

2. Coverallsをセットアップ

2.1. coveralls.ioにアカウントを作成する

2.2. coveralls.ioとGithubを連携する

2.3. Coveralls.ioとGithubの各リポジトリを紐づけする

2.4. install

2.5. npm run script を作成する

2.6. reporterの実行確認

3. Github Actionsを作成する

3.1. Github Actionを実行

4. README にバッジを埋め込む

参考リンク

2. `Coveralls`をセットアップ

2.1. `coveralls.io`にアカウントを作成する

2.2. `coveralls.io`と`Github`を連携する

2.3. `Coveralls.io`と`Github`の各リポジトリを紐づけする

2.6. `reporter`の実行確認

3. `Github Actions`を作成する

3.1. `Github Action`を実行