Use Karma for Unit Testing with Webpack

Share this video with your friends

When writing tests run by Karma for an application that’s bundled with webpack, it’s easiest to integrate webpack and Karma directly together. In this lesson we’ll see how to utilize the karma-webpack plugin and reuse our existing webpack configuration to preprocess our test files with webpack.

samuel

~ 8 years ago

Any suggestions on how to handle the CommonsChunkPlugin? I am getting an error webpackJsonp in my testing file.

Thanks

Kent C. Dodds(instructor)

~ 8 years ago

Hey! Actually, you might like my other lessons about Webpack. Specifically this one. Basically you disable CommonsChunkPlugin in test mode. I also recommend you give this a look to help make that easier :)

Good luck!

Carlos

~ 8 years ago

Things to note if dealing with typescript like me:

Take account for the Mime property in karma.conf.ts for typescript files or the test won't even run (because the karma browser doesn't recognize the mime type), for example like:

const karmaConfig = (config) => {
  config.set({
    ...
    mime : {
      'text/x-typescript': [
        'ts',
        'tsx'
      ]
    },
    ...

Remember when using the globs, that typescript files have ts extension.