getting nyc/istanbul coverage report to work with typescript

Question

I'm struggling to get proper coverage with nyc/istanbul for my typescript/mocha/gulp project. I've tried a number of approaches, some of them seem to be unable to use source maps and other fails due to ts-node/tsc errors. My current setup is:

nyc relevant config in 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 relevant part

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
  }
}

With the above setup coverage produces results for all the files but they are incorrect for TS files most probably due to source maps not being used (i.e. report shows no coverage for lines which are comments and the numbers seems to be wrong as well).

With a number of variant approaches tried with no success one of the most commonly suggested is to add "require": ["ts-node/register"] to nyc configuration yet then I'm getting errors complaining about i.e. gulpfile.js, docs/reports/coverage/lcov-report/prettify.js and number of other JS files to be not under 'rootDir' which is correct yet it is not clear why ts-node tries to process all the files out of src even if they are excluded in tsconfig.json (still the configuration gets really complex).

I'll appreciate any suggestion which way to go to get proper coverage report for TS files.

Answer 1

Recently I found a satisfiable solution by using "target": "es6" instead of es5 in tsconfig.json's compilerOptions. While changing target directly in tsconfig.json may not be an option as it affects build, the other tip is to use TS_NODE_COMPILER_OPTIONS='{"target":"es6"} which can be added directly in package.json scripts as i.e. :

"test:coverage": "TS_NODE_COMPILER_OPTIONS='{\"target\":\"es6\"}' nyc npm run test:unit",

where test:unit is whatever way being used to run actual tests (in my case just gulp mocha.

NOTE: I've also updated nyc to latest 11.1.0 and ts-node to 3.3.0 as suggested on https://github.com/istanbuljs/nyc/issues/618 thread

Answer 2

I'm not sure this is the same problem but I'll put this here in case it helps future developers...

I wasn't getting any coverage data until I added exclude-after-remap=false to the nyc section of my package.json.

This is listed in the documentation but not in a very prominent way (IMO).