Karma / Jasmine unit test with JSPM 404 on my JSPM packages

Question

I am trying to get JSPM / Karma / Babel / Jasmine to work together. But I get an error when starting karma

15 04 2016 17:34:02.428:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
15 04 2016 17:34:02.434:INFO [launcher]: Starting browser Chrome
15 04 2016 17:34:03.353:INFO [Chrome 49.0.2623 (Mac OS X 10.11.3)]: Connected on socket /#BSCbuviA4_LADHmaAAAA with id 80043999
15 04 2016 17:34:04.212:WARN [web-server]: 404: /base/aurelia-dependency-injection.js
15 04 2016 17:34:04.213:WARN [web-server]: 404: /base/aurelia-router.js
Chrome 49.0.2623 (Mac OS X 10.11.3) ERROR
  Error: Error: XHR error (404 Not Found) loading /Users/allen/dev/work/Web/aurelia-dependency-injection.js
    Error loading /Users/allen/dev/work/Web/wwwroot/src/app.js

My folder structure:

> Web
  karma.conf.js
  -> node_modules
  -> test
    --> unit
  -> wwwroot
    --> src (all my js)
    --> jspm_packages
    config.js

My Karam.conf.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: ['jspm', 'jasmine'],

    jspm: {
      // Edit this to your needs
      loadFiles: ['test/unit/setup.js', 'test/unit/**/*.js'],
      serveFiles: ['wwwroot/src/**/*.js'],
      paths: {
        '*': '*',
        'github:*': 'jspm_packages/github/*',
        'npm:*': 'jspm_packages/npm/*',
      },
    },

    // list of files / patterns to load in the browser
    files: [],
    proxies: {
      '/base/jspm_packages/': '/base/wwwroot/jspm_packages/',
    },

    // 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': ['babel'],
      'src/**/*.js': ['babel'],
    },

    babelPreprocessor: {
      options: {
        sourceMap: 'inline',
        presets: ['es2015-loose', 'stage-1'],
        plugins: [
          'syntax-flow',
          'transform-decorators-legacy',
          'transform-flow-strip-types',
        ],
      },
    },

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

My app.js has the following imports:

import { inject } from 'aurelia-dependency-injection';
import { Router } from 'aurelia-router';
import { Navscroll } from '../src/modules/scroll-anim.js'

I am not sure if my proxy is configured correctly or not or what is the problem?

Answer 1

Error: Error: XHR error (404 Not Found) loading /Users/allen/dev/work/Web/aurelia-dependency-injection.js
Error loading /Users/allen/dev/work/Web/wwwroot/src/app.js

This is your first problem. This is not XHRing for your proxy. Instead, it tries to use the path URL. This will certainly not succeed, since XHR can only be HTTP, as far as I have ever seen. You need a protocol: // host: port / path format.

http://localhost:9876/src/app.js , . (, /src/ app.js .)

app.js. , app.js.