Import yields undefined with Karma + ES6 + jspm

Question

I am using es6 + jspm + babel + karma combination. I created small project, put everything together, configured npm, jspm and started karma, but got an error caused by import returning undefined value in my spec file.

My configuration

src/app.js

'use strict';

export class Greeter {
    get greeting() {
        return 'It works!';
    }
}

test/sample.spec.js

'use strict';

import Greeter from 'src/app.js';

describe('A test suite', function() {

  it('should work', function() {
      let greeter = new Greeter();
      expect(greeter.greeting).toEqual('It works!');
  });
});

karma.conf.js

module.exports = function(config) {
  'use strict';

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

    jspm: {
      loadFiles: ['test/**/*.js'],
      serveFiles: ['src/**/*.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: {
    },

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

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

But I am getting

FAILED TESTS:
  A test suite
    ✖ should work
      PhantomJS 2.1.1 (Mac OS X 0.0.0)
    undefined is not a constructor (evaluating 'new Greeter()')

Structure

.
├── config.js
├── gulpfile.js
├── index.html
├── karma.conf.js
├── package.json
├── src
│   ├── app.js
│   └── sass
│       └── main.scss
└── test
    └── sample.spec.js

package.json

{
  "jspm": {
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4"
    }
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-preset-es2015": "^6.6.0",
    "babel-register": "^6.7.2",
    "browser-sync": "^2.11.2",
    "chai": "^3.5.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-cached": "^1.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-csso": "^1.1.0",
    "gulp-html-replace": "^1.5.5",
    "gulp-inject": "^4.0.0",
    "gulp-jspm": "^0.5.8",
    "gulp-load-plugins": "^1.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.2.0",
    "gulp-shell": "^0.5.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.3",
    "gulp-util": "^3.0.7",
    "gulp-watch": "^4.3.5",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.3",
    "karma-firefox-launcher": "^0.1.7",
    "karma-jspm": "^2.1.0",
    "karma-mocha": "^0.2.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sinon-chai": "^1.2.0",
    "lolex": "^1.4.0",
    "mocha": "^2.4.5",
    "phantomjs-prebuilt": "^2.1.7",
    "require-dir": "^0.3.0",
    "rimraf": "^2.5.2",
    "run-sequence": "^1.1.5",
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0"
  }
}

It seems that babel is properly executed because it reflects syntax errors. I can't get any export/import working though.

Answer 1

Export the app like this:

export default class Greeter {

It needs a default export the way you import it. Or change the import:

import { Greeter } from 'src/app.js';

I.e. use the named export.