webpack – karma and istanbul code coverage

part of the difficulty of using something like webpack is that the source code that you edit is not the final code that is used in your project. so when it comes to unit testing your code, you have to figure out how to instrument what webpack is bundling.

suppose that you are using karma as your test runner with mocha, chai, and sinon. you can add istanbul to the mix to add code coverage, but you need istanbul to understand how webpack bundles files.

luckily, there’s istanbul-instrumenter-loader. you can add this as a loader which will add the instrumentation of the code in your project as part of the webpack process.

a sample karma.conf.js file:

3 thoughts on “webpack – karma and istanbul code coverage

  1. Do you have one tutorial with TypeScript working?

    I have one with Webpack and TS with the awesome-typescript-loader, but it breaks as i require one of the classes in the app.

    PD: Mine is a Hello world Node app written in typescript, transpiled with webpack and trying to test it with karma-jasmine, using istanbul loader with karma-coverage but yet to make it work.

  2. This configuration gives coverage of files which have tests. How to configure the coverage to consider all the source files and give overall coverage.

Leave a Reply

Your email address will not be published. Required fields are marked *