The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Use Karma for Unit Testing with Webpack

Use Karma for Unit Testing with Webpack

4:53
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`](https://npmjs.com/package/karma-webpack) plugin and reuse our existing webpack configuration to preprocess our test files with webpack.
Watch this lesson now
Avatar
egghead.io

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.

Avatar
samuel

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

Thanks

Avatar
Kent C.

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!

In reply to samuel
Avatar
Carlos

Things to note if dealing with typescript like me:
1. 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'
      ]
    },
    ...
  1. Remember when using the globs, that typescript files have ts extension.
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?