karma-webpack : Module name has not been loaded yet for context : use require([])

问题

I'm new to Jasmine/Karma unit testing for JavaScript applications. I'm trying to implement it in my current project which is using Angular 1.4.12 and Webpack 1.13.1 for bundling. My folder structure is as follows:

The index.js file inside 'core' is trying to require various other modules which are required for Webpack bundling. The file looks like this:

require('../../bower_components/font-awesome/css/font-awesome.min.css');
require('../../bower_components/bootstrap/dist/css/bootstrap.min.css');
require('./scripts/app');
require('./scripts/index');
require('./views/index');
require('./styles/index');

Now, when I'm trying to run a sample test file which resides at the following location: 'modules/st/scripts/controllers/st.test.js', I get the following error message:

Uncaught Error: Module name "../../bower_components/font-awesome/css/font-awesome.min.css" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded at C:/gitcode/repo/fm-dashboard/node_modules/requirejs/require.js:143

My karma.conf.js file looks like:

var webpack = require('webpack');
var getWebpackConfig = require('./webpack.config.js');

var webpackConfig = getWebpackConfig('test');
webpackConfig.output.path = __dirname+'/_build/test';
webpackConfig.entry = {};

// Karma configuration

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'],


    // list of files / patterns to load in the browser
    files: [
        './node_modules/requirejs/require.js',
        './app/core/index.js',
        './bower_components/angular/angular.js',
        './bower_components/angular-mocks/angular-mocks.js'
    ],


    // 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: {
        '../app/core/index.js': ['webpack']
    },


    // 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: ['Chrome'],


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

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,

    webpack: webpackConfig,


    webpackMiddleware: {
        noInfo: true
    }    
  })
}

I was under the impression that including Webpack in the preprocessors object would resolve this require issue but seems like this is not the case.

I tried including 'commonjs' in my preprocessors object and frameworks array as suggested by a few people but it didn't help. Can anyone please let me know how to get rid of this 'require' issue and move ahead with my testing?

Thanks in advance.

来源：https://stackoverflow.com/questions/38626192/karma-webpack-module-name-has-not-been-loaded-yet-for-context-use-require

标签

javascript

angularjs

karma-runner

karma-jasmine

karma-webpack