获取nyc / istanbul覆盖率报告以使用打字稿

时间:2017-06-22 14:14:19

标签: javascript typescript mocha istanbul tsconfig

我正在努力为我的打字稿/ 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配置,然后我收到错误抱怨ie {{1} },gulpfile.js以及其他JS文件的数量为docs/reports/coverage/lcov-report/prettify.js这是正确的但不清楚为什么not under 'rootDir'尝试处理ts-node之外的所有文件,即使它们被排除在src之外(配置变得非常复杂)。

我很感激任何建议如何获得TS文件的正确报道。

3 个答案:

答案 0 :(得分:5)

最近,我在"target": "es6"的{​​{1}}中使用es5代替tsconfig.json找到了一个令人满意的解决方案。虽然直接在compilerOptions中更改target可能不会影响构建,但另一个提示是使用tsconfig.json,可以直接添加TS_NODE_COMPILER_OPTIONS='{"target":"es6"} package.json如...:

scripts

其中"test:coverage": "TS_NODE_COMPILER_OPTIONS='{\"target\":\"es6\"}' nyc npm run test:unit", 是用于运行实际测试的任何方式(在我的情况下只是test:unit

注意:我还根据https://github.com/istanbuljs/nyc/issues/618主题

的建议,将gulp mocha更新为最新的11.1.0,将nyc更新为ts-node

答案 1 :(得分:0)

我不确定这是同一个问题,但是我会放在这里,以防它对将来的开发人员有所帮助...

直到将exclude-after-remap=false添加到package.json nyc 部分中之前,我没有任何覆盖率数据。

它在in the documentation中列出,但不是很突出(IMO)。

答案 2 :(得分:0)

由于许多更改破坏了旧的工作设置,因此我创建了一个冗长的示例项目,涵盖了打字稿+摩卡+ nyc,还支持非调用文件的正确覆盖(示例中通常未包括)以及一些单元测试示例和质量使用最新版本进行检查。

我要去摩卡8+纽约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",