更新履歴

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

了

参考リンク