mcliment / typescript-karma-webpack-coverage-sample

The most basic example I can think of a Typescript project with Karma + Webpack + full coverage

Typescript + Karma + Webpack + Coverage ✨

The most basic example I can think of a Typescript project with Webpack + Karma + full coverage

Motivation 💪

I tried many routes to make this work properly. Some people have enough with a coverage report from the js file generated by webpack but I wanted a better user experience and invested some time finding a good solution.

In the proposed solution, karma-typescript can be also used instead of going through the webpack route but in more complex scenarios reusing the main webpack configuration may be very convenient.

Notable packages 🎁

• istanbul-instrumenter-loader to generate istanbul instrumentation data for coverage
• karma-coverage-istanbul-reporter to report coverage from istanbul
• karma-webpack to preprocess files through Webpack

typescript-karma-webpack-coverage-sample's Issues

An in-range update of webpack is breaking the build 🚨

The devDependency webpack was updated from 4.35.3 to 4.36.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ ci/circleci: test: Your tests failed on CircleCI (Details).
• ❌ Install: Failed!

---

Release Notes for v4.36.0

Features

• SourceMapDevToolPlugin append option now supports the default placeholders in addition to [url]
• Arrays in resolve and parser options (Rule and Loader API) support backreferences with "..." when overriding options.

Commits

The new version differs by 42 commits.

• 95d21bb 4.36.0
• aa1216c Merge pull request #9422 from webpack/feature/dot-dot-dot-merge
• b3ec775 improve merging of resolve and parsing options
• 53a5ae2 Merge pull request #9419 from vankop/remove-valid-jsdoc-rule
• ab75240 Merge pull request #9413 from webpack/dependabot/npm_and_yarn/ajv-6.10.2
• 0bdabf4 Merge pull request #9418 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.5.2
• f207cdc remove valid jsdoc rule in favour of eslint-plugin-jsdoc
• 31333a6 chore(deps-dev): bump eslint-plugin-jsdoc from 15.3.9 to 15.5.2
• 036adf0 Merge pull request #9417 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.8.0
• 37d4480 Merge pull request #9411 from webpack/dependabot/npm_and_yarn/simple-git-1.121.0
• ce2a183 chore(deps-dev): bump eslint-plugin-jest from 22.7.2 to 22.8.0
• 0beeb7e Merge pull request #9391 from vankop/create-hash-typescript
• bf1a24a #9391 resolve super call discussion
• bd7d95b #9391 resolve discussions, AbstractMethodError
• 4190638 chore(deps): bump ajv from 6.10.1 to 6.10.2

There are 42 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Webstorm shows links to wrong lines

Hey! Thank you for this. I've been looking for a working setup for my project for ages.

Unfortunately the sourcemaps appear to be off. It's a problem I have face myself and managed to fix with webpack setting:

const webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.SourceMapDevToolPlugin({
            filename: null,
            test: /\.(ts|js)($|\?)/i
        })
    ]
};

It works for me without coverage. Unfortunately adding Istanbul based on your example, the lines reported by webstorm are shifted. Check the screenshot, where it links to line 25 where it should be 51.

If I remove SourceMapDevToolPlugin then Webster does not pick up the mapping at all and only shows the tests/Heracles-spec.ts:104987:9218 locations 🤔

Have you been able to get similar this correct in any of your projects?