typescript + ava + nyc + gitlab CI/CD 實現程式碼覆蓋率
typescript ava nyc gitlab ci 實現程式碼覆蓋率自動化以及 badges 顯示
最終配置
- 在
package.json新增以下
{
"scripts": {
"coverage": "TS_NODE_FILES=true nyc ava --fail-fast -v"
},
"ava": {
"compileEnhancements": false,
"extensions": ["ts"],
"require": ["ts-node/register"]
},
"nyc": {
"include": ["src/**/*.ts"],
"exclude": ["**/*.d.ts"],
"extension": [".ts"],
"require": ["ts-node/register"],
"reporter": ["html", "text-summary"],
"sourceMap": true,
"instrument": true
}
}
-
需要安裝
source-map-support, 在package.json同目錄下執行yarn add -D source-map-support或者npm install --save-dev source-map-support -
在
gitlab-ci.yml新增一下內容
test-coverage: stage: test-coverage coverage: '/Lines\s*:\s*(\d+(?:\.\d+)?)%/' script: - yarn - yarn run coverage
配置詳解
ava 配置
ava 的配置 直接從官方文件 typescript.md 的 動態編譯部分獲取 配置
注意!!
如果你寫的 typescript 程式碼中 含有 d.ts 檔案
需要加上環境變數 TS_NODE_FILES=true
nyc 配置
從官方文件 tutorials/typescript 部分得知需要配置 extension 為 .ts , 從 nyc-mocha-typescript 這篇文章得知, 需要 source-map-support 來對映 ts 和 js 的程式碼關係
而 reporter 配置, 可以在 alternative-reporters 選擇自己需要的 reporter , 由於需要配合 gitlab ci , 這邊需要選擇 text-summary 方便 glitlab 分析
gitlab 配置
從官方文件可知, 需要用正則表示式來擷取最終的覆蓋率, 由於用了 text-summary 的 reporter , 所以正則表示式為 /Lines\s*:\s*(\d+(?:\.\d+)?)%/
最後, 通過 URL https://gitlab.com/<namespace>/<project>/badges/<branch>/coverage.svg 來顯示一個小圖示, 比如
完整例子
包含了 ts ava nyc gitlab ci npm publish 和 badges 顯示