How to integrate karma in webpack

Question

I am a webpack newbie and have a question about testing.

I have a project which uses webpack, typescript and karma as test runner and I would like to run my tests on every file change (e.g. in "watch" mode)

I am aware of karma-webpack and it works well when I run karma as own process (karma start ...)

But what I want is to integrate karma in the webpack flow. So, from my naive point of view, I thought karma has to be defined in preloading of webpack (such as a linter).

But I found nothing.... I can not believe that this common workflow is not possible (run tests on every source change)

Can anybody of you give me a suggestion?

Answer 1

Time flies and it's June 2018 already. As there isn't much documentation about this online I want to give out my 2 cents.

I have currently a setup working where I bundle my tests with webpack a watch for changes in order to rerun automatically the tests.

I'm using karma-webpack using the configuration explained in the Alternative usage section and I think it's the proper way to solve the problem asked in the question.

karma.conf.js

{
  ...
  files: [
    // only specify one entry point
    // and require all tests in there
    'test/index_test.js'
  ],
  preprocessors: {
    // add webpack as preprocessor
    'test/index_test.js': [ 'webpack' ]
  },
  ...
}

test/index_test.js

// require all modules ending in "_test" from the
// current directory and all subdirectories
const testsContext = require.context(".", true, /_test$/)

testsContext.keys().forEach(testsContext)

Watching for changes of the whole bundle as @Adi Prasetyo suggests is wrong in my opinion. We should only watch for changes in the tests files and the files that are imported inside them, which can be achieved with configuration shown in the last URL.

Very important for hot reloading to work (at least in my case it was what made it work), you need to setup webpack-dev-middleware configuration in order to update the tests bundle everytime a change happens in some test file or the files being imported inside them. This is the config I'm using:

karma.config.js

{
  ...
  webpackMiddleware: {
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000, // customize depending on PC power
    },
  },
  ...
}

More info about it here.

Answer 2

I have same problem, as the TDD workflow that i use. After writing test then change the code the test doesn't re-run. Run test on every file change is possible.

As karma files have 3 options: Included, served, watched.

You can specify the bundle as pattern then tell karma to watch it

karma.config.js

files: [
  // watch final file so when source change and it's final file, re run the test
  { pattern: './dist/js/*.wp.js', watched: true},
],

but when we use karma start no webpack active and watching. So use concurrently to run karma and webpack. Note that webpack should watch only the source code and karma should watch the bundle file. Then we can add script property to package.json like so

package.json

"scripts": {
  "test": "karma start karma.config.js",
  "build": "webpack",
  "dev": "concurrently \"webpack --progress --colors --watch\" \"karma start karma.config.js --colors\"",
 },

Then run npm run dev to start coding