CODEWITHSUNDEEP
angularjsbabeljskarma-mocha
Landon Cline
Landon Cline

Reputation: 31

Setting up Karma with Angular, Babel (ES6), Webpack and Mocha

I'm trying to setup Karma on a project with Angular. The error I'm currently receiving is:

Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.4.7/$injector/nomod?p0=app at /htdocs/src/javascript/app/controllers/fixedQuoteFormController_test.js:2073

What I'm trying to accomplish is just initial setup since I have no tests obviously. It doesn't seem to like my module.export for the controller. Any help on how I can get this setup working would be appreciated!

My Karma.conf file:

// Karma configuration
// Generated on Tue Nov 17 2015 13:05:37 GMT-0600 (CST)

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: ['mocha', 'chai'],

plugins: [
  require("karma-webpack"),
  require("karma-mocha"),
  require("karma-phantomjs-launcher"),
  require("karma-chai")
],

// list of files / patterns to load in the browser
files: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'src/javascript/app/**/*_test.js',
  'src/javascript/app/**/**/*_test.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: {
  // add webpack as preprocessor
  'src/javascript/app/*_test.js': ['webpack'],
  'src/javascript/app/**/*_test.js': ['webpack']
},

webpack: {
  // karma watches the test entry points
  // (you don't need to specify the entry option)
  // webpack watches dependencies
  // webpack configuration
},

webpackMiddleware: {
  // webpack-dev-middleware configuration
  // i. e.
  noInfo: true
},

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

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

// Concurrency level
// how many browser should be started simultanous
concurrency: Infinity,
  })
}

My test file: (just trying to require controller)

const testCont = require('./testCont');

My Controller

module.exports = angular.module('app').controller('testCont', testCont);

/* @ngInject */
function testCont() {
    return 1;
}

Upvotes: 3

Views: 4922

Answers (1)

Sean Larkin
Sean Larkin

Reputation: 6420

I have a proof of concept that I have been working on that serves as a successful working setup of Angular+Webpack+ES6+Karma+Mocha+Chai.

Maybe it will give you some insight or help on your problem. Feel free to fork it and give it a whirl and see if that setup is something that might work for you. I have my Webpack.config.js and Karma.conf.js in separate files.

It could serve as a cleaner starting point for you.

Upvotes: 2

Related Questions