Search code examples
unit-testingkarma-runnerkarma-mocha

How to prevent loading images in karma runner


How to configure karma to stop loading images while testing? i was trying to use solution from here in my karma.config.js :

var webpack = require('webpack');

module.exports = function (config) {
   config.set({
      browsers: [ 'Chrome' ],
      singleRun: true,
      frameworks: [ 'mocha' ],
      files: [
         'tests.webpack.js',
         {pattern: './assets/img/signup.png', watched: false, included: false, served: true},
      ],
      proxies: {
         '/assets/img/signup.png': '/assets/img/signup.png'
      },
      preprocessors: {
         'tests.webpack.js': [ 'webpack', 'sourcemap' ]
      },
      reporters: ['mocha'],
      mochaReporter: {},
      webpack: {
         devtool: 'inline-source-map',
         module: {
            loaders: [
               {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  loader: 'babel-loader',
                  query: {
                     cacheDirectory: true,
                     plugins: ['transform-decorators-legacy' ],
                     presets: ['airbnb', 'es2015', 'stage-1', 'react']
                  }
               }
            ]
         },
         externals: {
            'cheerio': 'window',
            'react/addons': true,
            'react/lib/ExecutionEnvironment': true,
            'react/lib/ReactContext': true
         }
      },
      webpackServer: {
         noInfo: true //please don't spam the console when running in karma!
      }
   });
};

but this doesn't work for me. I still get error:

[web-server]: 404: /front-end2/assets/img/signup.png

Maybe there are any other solution to prevent loading images ? the biggest problem is not warning message but errors which ocures when karma try to get image from my local server


Solution

  • The proxies configuration does not look right. Try something like this:

    ...
    proxies: {
        '/front-end2/assets/img/': '/base/assets/img/'
    },
    ...
    

    A brief explanation:

    • /front-end2/assets/img/ relates to the requests that are being made;
    • /assets/img/ relates the the pattern in the files configuration; and
    • /base/ is the path from which Karma serves the files.