更新履歴
- 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
[](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
了
参考リンク