javascriptimportkarma-runnerwebpackexternals

How do I use package aliases in Karma? (Example: $ for jquery)


My code depends on tons of other code, and is loaded last in the browser when running from the normal index.html-file. So of course when dependency 1 is jquery, and dependency 2 uses $.html(), and my code is loaded third, that works just fine in the browser.

But in Karma everything screeches to a halt since I'm loading 'jquery' from bower, not '$'.

To be clear: it's not my code that's creating errors, it's the dependencies. I don't get to test my code since everything errors out before then.

So how do I get the tests to work?

Note: I also run everything through webpack so I can use ES6-code, but webpack is loaded in Karma as well, so that should have no effect.

Chrome 45.0.2454 (Mac OS X 10.11.0) ERROR
Uncaught TypeError: Cannot set property '$' of undefined
at /Users/tom/dev/orm/bower_components/jointjs/dist/joint.js:37

Webpack.conf.js:

var webpack = require('webpack');
module.exports = {
  devtool: 'source-map-loader',
  externals: [
    'jquery',
    'joint',
    'backbone',
    'loadash'
  ],
  // entry: './src/index.js',
  // output: {
  //   path: './public',
  //   filename: 'designer.js'
  // },
  plugins: [
    new webpack.ProvidePlugin({'$': 'jquery', 'jointjs': 'joint'})
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

Karma.conf.js:

// Karma configuration
// Generated on Thu Oct 08 2015 10:54:47 GMT+0200 (CEST)
var webconf = require('./webpack.config.js');
module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: [
      'jasmine',
      'requirejs',
      'bower'
    ],


    // list of files / patterns to load in the browser
    files: [
      'test-main.js',
      {
        pattern: 'test/*.js',
        included: false
      }
    ],

    bowerPackages: [
      'jquery',
      'jointjs',
      'backbone',
      'lodash'
    ],
    // list of files to exclude
    exclude: [],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'test/*.js': [
        'webpack',
        'sourcemap'
      ],
      'src/**/*.js': [
        'webpack',
        'sourcemap'
      ]
    },
    webpack: webconf,


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: [
      'progress'
    ],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: [
      'PhantomJS',
      'Chrome'
    ],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};

Solution

  • I have no idea what changed, but it now works fine. I include here the final Karma config-file. The webpack-file is identical to the one above.

    Note that a couple of configuration changes are actually just normal configuration changes that I've changed since getting it to work.

    // Karma configuration
    // Generated on Thu Oct 08 2015 10:54:47 GMT+0200 (CEST)
    var webconf = require('./webpack.config.js');
    module.exports = function(config) {
      config.set({
    
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: './',
    
    
        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: [
          'requirejs',
          'bower',
          'jasmine',
        ],
        bowerPackages: [
          'jquery',
          'lodash',
          'backbone',
          'jointjs'
        ],
    
        // list of files / patterns to load in the browser
        files: [
          'test-main.js',
          {
            pattern: 'test/*.js',
            included: false
          }
        ],
        // list of files to exclude
        exclude: [],
    
    
        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
          'test/*.js': [
            'webpack',
            'sourcemap'
          ],
          'src/**/*.js': [
            'webpack',
            'sourcemap'
          ]
        },
        webpack: webconf,
    
    
        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: [
          'progress'
        ],
    
    
        // web server port
        port: 9876,
    
    
        // enable / disable colors in the output (reporters and logs)
        colors: true,
    
    
        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,
    
    
        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,
        client: {
          captureConsole: false
        },
        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: [
          'PhantomJS',
          'Chrome'
        ],
    
    
        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false
      });
    };