web-dev-qa-db-ja.com

nyc / istanbulカバレッジレポートをtypescriptで機能させる

TypeScript/mocha/gulpプロジェクトでnyc/istanbulを適切にカバーするのに苦労しています。いくつかのアプローチを試しましたが、ソースマップを使用できないものもあれば、ts-node/tscエラーが原因で失敗するものもあります。私の現在の設定は次のとおりです。

package.jsonのnyc関連する構成

"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.jsmocha関連部分

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ファイルでは正しくありません（つまり、レポートにはコメントである行のカバレッジが表示されず、番号も間違っているようです）。

いくつかのバリアントアプローチが試みられましたが成功しませんでしたが、最も一般的に提案されたものの1つは、"require": ["ts-node/register"]をnyc構成に追加することですが、それでもgulpfile.js、docs/reports/coverage/lcov-report/prettify.jsおよびnumber他のJSファイルのnot under 'rootDir'は正しいですが、ts-nodeで除外されている場合でもtsconfig.jsonがsrcからすべてのファイルを処理しようとする理由は明らかではありません（構成は本当に複雑です）。

TSファイルの適切なカバレッジレポートを取得するための方法についての提案をいただければ幸いです。

javascripttypescriptmochaistanbultsconfig
10
ciekawy

最近、"target": "es6"のcompilerOptionsでes5の代わりにtsconfig.jsonを使用することで充足可能な解決策を見つけました。 tsconfig.jsonでtargetを直接変更することは、ビルドに影響するためオプションではない場合がありますが、もう1つのヒントは、TS_NODE_COMPILER_OPTIONS='{"target":"es6"}scriptsに直接追加できるpackage.jsonを使用することです。

"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に更新しました。

7
ciekawy

これが同じ問題かどうかはわかりませんが、将来の開発者に役立つ場合に備えて、ここに配置します...

exclude-after-remap=falseのnycセクションにpackage.jsonを追加するまで、カバレッジデータを取得していませんでした。

これは ドキュメントに と記載されていますが、あまり目立つ方法ではありません（IMO）。

0
Motti