获取 nyc/istanbul 覆盖率报告以使用打字稿
getting nyc/istanbul coverage report to work with typescript
我正在努力为我的 typescript/mocha/gulp 项目获得 nyc/istanbul 的适当报道。我尝试了多种方法,其中一些方法似乎无法使用源映射,而另一些方法则由于 ts-node
/tsc
错误而失败。我当前的设置是:
nyc
package.json
中的相关配置
"scripts": {
"test:coverage": "nyc npm run test:unit",
"test:unit": "gulp mocha"
}
"nyc": {
"check-coverage": true,
"all": true,
"extension": [
".js",
".jsx",
".ts",
".tsx"
],
"include": [
"src/**/!(*.test.*).[tj]s?(x)"
],
"reporter": [
"html",
"lcov",
"text",
"text-summary"
],
"report-dir": "docs/reports/coverage"
}
gulpfile.js
mocha
相关部分
const SRC_DIR = path.join(__dirname, 'src');
const SRC_FILES = path.join(SRC_DIR, '**', '*.[jt]s?(x)');
const TEST_FILES = path.join(SRC_DIR, '**', '*.test.[jt]s?(x)');
const MOCHA_CONFIG = {
src: [
TEST_FILES
],
watchSrc: [
SRC_FILES,
TEST_FILES
],
mocha: {
// compilers: [
// 'ts:ts-node/register',
// 'tsx:ts-node/register'
// ],
require: [
'./tests/setup.js',
'ignore-styles',
'source-map-support/register'
]
}
};
gulp.task('mocha', mocha(MOCHA_CONFIG));
tsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"rootDir": "./src",
"outDir": "./build",
"allowJs": true,
"module": "commonjs",
"target": "es5",
"lib": ["es5", "es6", "dom"],
"sourceMap": true,
"inlineSourceMap": false,
"inlineSources": false,
"experimentalDecorators": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"jsx": "react",
"moduleResolution": "node"
},
"exclude": [
"docs",
"tests",
"**/*.test.js",
"**/*.test.jsx",
"**/*.test.ts",
"**/*.test.tsx",
"tools",
"gulpfile.js",
"node_modules",
"build",
"typings/main",
"typings/main.d.ts"
],
"awesomeTypescriptLoaderOptions": {
"useCache": true,
"useBabel": true
}
}
通过上述设置,覆盖会为所有文件生成结果,但它们对于 TS 文件不正确,很可能是由于未使用源映射(即报告显示没有覆盖注释行,数字似乎是错误的)以及)。
尝试了多种变体方法但没有成功,其中最常见的建议之一是将 "require": ["ts-node/register"]
添加到 nyc
配置,然后我收到错误抱怨,即 gulpfile.js
, docs/reports/coverage/lcov-report/prettify.js
和其他 JS 文件的数量 not under 'rootDir'
这是正确的但不清楚为什么 ts-node
试图处理 src
中的所有文件,即使它们被排除在 tsconfig.json
中(配置仍然非常复杂)。
对于获取 TS 文件的正确覆盖率报告的任何建议,我将不胜感激。
最近,我在 tsconfig.json
的 compilerOptions
中使用 "target": "es6"
而不是 es5
找到了一个令人满意的解决方案。虽然直接在 tsconfig.json
中更改 target
可能不是一个选项,因为它会影响构建,另一个提示是使用 TS_NODE_COMPILER_OPTIONS='{"target":"es6"}
可以直接在 package.json
[=19= 中添加] 即:
"test:coverage": "TS_NODE_COMPILER_OPTIONS='{\"target\":\"es6\"}' nyc npm run test:unit",
其中 test:unit
是用于 运行 实际测试的任何方式(在我的例子中只是 gulp mocha
.
注意:我还按照 https://github.com/istanbuljs/nyc/issues/618 线程
上的建议将 nyc
更新到最新的 11.1.0 并将 ts-node
更新到 3.3.0
我不确定这是同一个问题,但我会把它放在这里以防它对未来的开发人员有帮助...
在我将 exclude-after-remap=false
添加到我的 package.json
.
的 nyc 部分之前,我没有得到任何覆盖率数据
已列出 in the documentation 但不是很显眼 (IMO)。
由于很多更改打破了旧的工作设置,我创建了一个详细的示例项目,涵盖 typescript + mocha + nyc 也支持对非调用文件的适当覆盖(这通常不包括在示例中)以及一些单元测试示例并使用最新版本进行质量检查。
我在去 mocha 8+ nyc 15+ 时遇到了几个问题。也许它也可以帮助其他人绊倒它。
https://github.com/Flowkap/typescript-node-template
如果您只对覆盖率感兴趣,请检查 .ncyrc.yml 和 mocharc.yml 以及 package.json 中的调用配置。 VsCode 还包括启动配置:
.nycrc.yml
extends: "@istanbuljs/nyc-config-typescript"
reporter:
- html
- lcovonly
- clover
# those 2 are for commandline outputs
- text
- text-summary
report-dir: coverage
.mocharc.yml
require:
- ts-node/register
- source-map-support/register
recursive: true
color: true
exit: true
extension:
- ts
- test.ts
在 package.json
测试作业
"test": "npm run lint && nyc mocha src test",
我正在努力为我的 typescript/mocha/gulp 项目获得 nyc/istanbul 的适当报道。我尝试了多种方法,其中一些方法似乎无法使用源映射,而另一些方法则由于 ts-node
/tsc
错误而失败。我当前的设置是:
nyc
package.json
"scripts": {
"test:coverage": "nyc npm run test:unit",
"test:unit": "gulp mocha"
}
"nyc": {
"check-coverage": true,
"all": true,
"extension": [
".js",
".jsx",
".ts",
".tsx"
],
"include": [
"src/**/!(*.test.*).[tj]s?(x)"
],
"reporter": [
"html",
"lcov",
"text",
"text-summary"
],
"report-dir": "docs/reports/coverage"
}
gulpfile.js
mocha
相关部分
const SRC_DIR = path.join(__dirname, 'src');
const SRC_FILES = path.join(SRC_DIR, '**', '*.[jt]s?(x)');
const TEST_FILES = path.join(SRC_DIR, '**', '*.test.[jt]s?(x)');
const MOCHA_CONFIG = {
src: [
TEST_FILES
],
watchSrc: [
SRC_FILES,
TEST_FILES
],
mocha: {
// compilers: [
// 'ts:ts-node/register',
// 'tsx:ts-node/register'
// ],
require: [
'./tests/setup.js',
'ignore-styles',
'source-map-support/register'
]
}
};
gulp.task('mocha', mocha(MOCHA_CONFIG));
tsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"rootDir": "./src",
"outDir": "./build",
"allowJs": true,
"module": "commonjs",
"target": "es5",
"lib": ["es5", "es6", "dom"],
"sourceMap": true,
"inlineSourceMap": false,
"inlineSources": false,
"experimentalDecorators": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"jsx": "react",
"moduleResolution": "node"
},
"exclude": [
"docs",
"tests",
"**/*.test.js",
"**/*.test.jsx",
"**/*.test.ts",
"**/*.test.tsx",
"tools",
"gulpfile.js",
"node_modules",
"build",
"typings/main",
"typings/main.d.ts"
],
"awesomeTypescriptLoaderOptions": {
"useCache": true,
"useBabel": true
}
}
通过上述设置,覆盖会为所有文件生成结果,但它们对于 TS 文件不正确,很可能是由于未使用源映射(即报告显示没有覆盖注释行,数字似乎是错误的)以及)。
尝试了多种变体方法但没有成功,其中最常见的建议之一是将 "require": ["ts-node/register"]
添加到 nyc
配置,然后我收到错误抱怨,即 gulpfile.js
, docs/reports/coverage/lcov-report/prettify.js
和其他 JS 文件的数量 not under 'rootDir'
这是正确的但不清楚为什么 ts-node
试图处理 src
中的所有文件,即使它们被排除在 tsconfig.json
中(配置仍然非常复杂)。
对于获取 TS 文件的正确覆盖率报告的任何建议,我将不胜感激。
最近,我在 tsconfig.json
的 compilerOptions
中使用 "target": "es6"
而不是 es5
找到了一个令人满意的解决方案。虽然直接在 tsconfig.json
中更改 target
可能不是一个选项,因为它会影响构建,另一个提示是使用 TS_NODE_COMPILER_OPTIONS='{"target":"es6"}
可以直接在 package.json
[=19= 中添加] 即:
"test:coverage": "TS_NODE_COMPILER_OPTIONS='{\"target\":\"es6\"}' nyc npm run test:unit",
其中 test:unit
是用于 运行 实际测试的任何方式(在我的例子中只是 gulp mocha
.
注意:我还按照 https://github.com/istanbuljs/nyc/issues/618 线程
上的建议将nyc
更新到最新的 11.1.0 并将 ts-node
更新到 3.3.0
我不确定这是同一个问题,但我会把它放在这里以防它对未来的开发人员有帮助...
在我将 exclude-after-remap=false
添加到我的 package.json
.
已列出 in the documentation 但不是很显眼 (IMO)。
由于很多更改打破了旧的工作设置,我创建了一个详细的示例项目,涵盖 typescript + mocha + nyc 也支持对非调用文件的适当覆盖(这通常不包括在示例中)以及一些单元测试示例并使用最新版本进行质量检查。
我在去 mocha 8+ nyc 15+ 时遇到了几个问题。也许它也可以帮助其他人绊倒它。
https://github.com/Flowkap/typescript-node-template
如果您只对覆盖率感兴趣,请检查 .ncyrc.yml 和 mocharc.yml 以及 package.json 中的调用配置。 VsCode 还包括启动配置:
.nycrc.yml
extends: "@istanbuljs/nyc-config-typescript"
reporter:
- html
- lcovonly
- clover
# those 2 are for commandline outputs
- text
- text-summary
report-dir: coverage
.mocharc.yml
require:
- ts-node/register
- source-map-support/register
recursive: true
color: true
exit: true
extension:
- ts
- test.ts
在 package.json
测试作业"test": "npm run lint && nyc mocha src test",