How to integrate karma into webpack

Question

I am new to webpack and am wondering about testing.

I have a project that uses webpack, typescript and karma as a test runner, and I would like to run my tests every time I change the file (for example, in watch mode)

I know karma-webpack and it works well when I start karma as my own process (the beginning of karma ...)

But I want to integrate karma into the webpack stream. So, from my naive point of view, I thought that karma should be determined by preloading webpack (e.g. linter).

But I didn’t find anything. I can’t believe that this common workflow is impossible (run tests with every change of source)

Can any of you give me an offer?

Answer 1

Time flies and is already June 2018. Since there is not much documentation on the Internet about this, I want to give out my 2 cents.

I currently have a setting in which I link my tests to the change tracking web package to automatically restart the tests.

I use karma-webpack using the configuration described in the Alternate Use section , and I think this is the right 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)

, @Adi Prasetyo, , . , , , URL.

, ( , , ), webpack-dev-middleware, , - . , :

karma.config.js

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

.

Answer 2

, TDD, . , . .

3 : , , .

, ,

karma.config.js

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

karma start, - . webpack. , webpack , . script package.json ,

package.json

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

npm run dev,

Answer 3

, webpack, . 100%, , , . , , ( ).

karma.conf.js : autoWatch: true singleRun: false.

karma.conf.js

module.exports = function(config) {
    config.set({
        // set other options and stuff...
        autoWatch:  true,
        singleRun: false
    });
};

autoWatchset to true allows you to view files and run tests whenever a file changes. Setting it singleRunto false means that you only need to execute karma start(or, nevertheless, integrate it into webpack) once to run your tests, instead of entering a command every time you make changes or want to run your lux; he just keeps karma in the background.