Why do I get a 404 message from Karma webserver?

Question

At the moment, I'm trying to setup a demo project with Node/AngularJs/JSPM with ES6 transpiler Babel and Karma.

The serving part is working. I need to improve it later but the first 'hello world' from angular is working.

I'd like to add Karma to run unit tests for the angular app. But I'm getting a 404 warning for jspm_packages, see screenshot below.

My test is not running because it will always fail. My test file looks like this (no angular specific part in there yet):

// HomeController.spec.js
import 'angular-mocks';

describe('Test suite for HomeController', function() {

    it('dummy test', function() {
        expect(true).toBe(true); // will not fail
    });
});

Not sure what's wrong and I've tried many things with-out success maybe I did something wrong. But here is what I've tried in the Karma config:

• Tried many different path setting because I think it's an issue with the path
• Used proxies
• Browserify and Bablify to transpile the sources
• JSPM plugin to load the dependencies for testing

You can find the code I'm currently working on here at bitbucket.

The directory structure of my app looks like this:

Here is a screenshot of Karma:

Here is my current Karma config file:

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: ['jspm', 'jasmine'],


// list of files / patterns to load in the browser
files: [
  //'client/test-unit/**/*.test.js'
],

jspm: {
  paths: {
    // '*': 'client/app/**/*.js'
  },
  // Edit this to your needs
  // config: 'client/app/jspm.config.js',
  // Edit this to your needs
  loadFiles: ['client/test-unit/**/*.spec.js'],
  serveFiles: ['client/app/**/*.js', 'client/app/**/*.css', 'client/app/**/*.html']
},

proxies:  {
  // '/assets/jspm_packages/': '/client/app/assets/jspm_packages/'
},

plugins:[
  'karma-jasmine',
  'karma-coverage',
  'karma-jspm',
  'karma-chrome-launcher'
],

// 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: {
//  'client/app/**/*.js': ['browserify'],
//  'client/test-unit/**/*.js': ['browserify']
},

/*browserify: {
  debug: true,
  transform: [ 'babelify' ]
},*/
// babelPreprocessor: {
//   options: {
//     sourceMap: 'inline'
//   },
//   filename: function (file) {
//     return file.originalPath.replace(/\.js$/, '.es5.js');
//   },
//   sourceFileName: function (file) {
//     return file.originalPath;
//   }
// },


// 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: false
 });
};

Answer 1

I think I've found a fix to my problem.

I had to setup some proxies to make it work. Also the change of the log level to logLevel: config.LOG_DEBUG for debugging my issue was helpful because then you'll see more details to the problem.

Another problem was that the test file was not transpiled before execution. That was because the preprocessors for transpiling were not setup correctly.

And the packages path inside of the jspm object is required too to make it work.

It's still pretty hard to understand and I'm not sure if there's an easier way to do it. Anyway the following karma.config is working for me:

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: ['jspm', 'jasmine'],


    // list of files / patterns to load in the browser
    files: [
      //'client/test-unit/**/*.test.js'
    ],

    proxies:  {
      '/base/app/': '/base/client/app/',
      '/base/assets/jspm_packages/': '/base/client/app/assets/jspm_packages/'
    },

    jspm: {
      // Edit this to your needs
      config: 'client/app/jspm.config.js',
      // Edit this to your needs
      loadFiles: ['client/test-unit/**/*.spec.js'],
      serveFiles: ['client/app/**/*.js'],
      packages: "client/app/assets/jspm_packages/"
    },


    plugins:[
      'karma-jasmine',
      'karma-coverage',
      'karma-jspm',
      'karma-chrome-launcher'
    ],

    // 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-unit/**/*.js': ['babel', 'coverage']
    //  'client/app/**/*.js': ['browserify'],
    //  'client/test-unit/**/*.js': ['browserify']
    },

    /*browserify: {
      debug: true,
      transform: [ 'babelify' ]
    },*/
    // babelPreprocessor: {
    //   options: {
    //     sourceMap: 'inline'
    //   },
    //   filename: function (file) {
    //     return file.originalPath.replace(/\.js$/, '.es5.js');
    //   },
    //   sourceFileName: function (file) {
    //     return file.originalPath;
    //   }
    // },


    // 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_DEBUG, //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: false
  });
};

And my test file looks like this:

// HomeController.spec.js

import 'app/app';
import 'angular-mocks';

describe('Test suite for HomeController', function() {

 // var homeController;

 beforeEach(function() {
  module('myApp');
  
  // inject(function($controller) {
  //  console.log('inject called', $controller);
  //  //controller = $controller; 
  //  homeController = $controller('homeController');
  // });
 });

 it('should say "Hello World"', inject(function($controller) {

   var homeController = $controller('homeController');

   // console.log(homeController, angular.mocks);
   expect(homeController.hello).toEqual('Hello world from ES6 HomeController.'); // will not fail
  })
 );
});