ES6 import doesn't work

[yordis]

Using import {React, Component} from 'react' doesn't work in any of the files you use it.

[chauthai]

I've tried importing React too and it seems karma-jspm can't handle imports inside a imported package. I'm using PhantomJS.

karma.config.js:

// Karma configuration
// Generated on Wed Dec 16 2015 14:00:01 GMT+0100 (CET)

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

    plugins: ['karma-coverage', 'karma-jspm', 'karma-mocha', 'karma-nyan-reporter', 'karma-phantomjs-launcher', 'karma-phantomjs-shim', 'karma-sinon-chai', 'karma-teamcity-reporter'],

    jspm: {
    // Edit this to your needs
      // baseURL: "./base", 
      config: './src/config.js',
      packages: './src/jspm_packages',
      loadFiles: [
        './test/*.spec.js',
      ],
      serveFiles: [
        './src/**/*.js'
      ],
      paths: {
        "github:*": "/src/jspm_packages/github/*",
        "npm:*": "/src/jspm_packages/npm/*"
      }
    },

    proxies: {
      '/src/': '/base/src/',
      '/test/': '/base/test/',
      '/jspm_packages/': '/src/jspm_packages/'
    },

    client: {
      mocha: {
        reporter: 'progress',
        ui: 'bdd'
      }
    },

    // list of files / patterns to load in the browser
    files: [
    ],


    // 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: {},

    // preprocessors: {
    //   'src/!(*config).js': ['babel', 'coverage'],
    // },

    // babelPreprocessor: {
    //   options: {
    //     presets: ['es2015'],
    //     sourceMap: 'inline',
    //     modules: 'system'
    //   },
    //   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'],
    // reporters: ['progress', 'coverage'],

    // reporter options 
    // nyanReporter: {
    //   // suppress the error report at the end of the test run 
    //   suppressErrorReport: false,

    //   // suppress the red background on errors in the error 
    //   // report at the end of the test run 
    //   suppressErrorHighlighting: true,

    //   // increase the number of rainbow lines displayed 
    //   // enforced min = 4, enforced max = terminal height - 1 
    //   numberOfRainbowLines: 100, // default is 4 
    // },
    // reporters: ['progress', 'coverage'],

    // optionally, configure the reporter 
    // coverageReporter: {
    //   // isparta works as a custom instrumentor, which must be registered in Karma config:
    //   instrumenters: {isparta: require('isparta')},
    //   instrumenter: {
    //       'src/**/*.js': 'isparta'
    //   },

    //   reporters: [
    //     {
    //         type: 'text-summary'
    //     },
    //     {
    //         type: 'html',
    //         dir: './test/coverage/',
    //         subdir: '.'
    //     }
    //   ]
    // },

    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,

    browserDisconnectTimeout: 10 * 1000, // 10s
    browserDisconnectTolerance: 2,
    browserNoActivityTimeout: 2 * 60 * 1000, // 2m
    captureTimeout: 0,

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

Test code:

import React from 'react';
import TestContainer from '../src/containers/test-container';
import Test from '../src/components/test';

describe("A test suite", () => {
   beforeEach( () => { });
   afterEach( () => { });
   it('should pass', 
    () => { 
        expect(TestContainer).to.not.be.undefined; 
    }
   );

   it('should pass', 
    () => { 
        expect(Test).to.not.be.undefined; 
    }
   );
});

Error log:

18 12 2015 15:24:16.006:WARN [web-server]: 404: /lodash.isfinite.js
18 12 2015 15:24:16.080:WARN [web-server]: 404: /fbjs/lib/warning.js
18 12 2015 15:24:16.084:WARN [web-server]: 404: /fbjs/lib/ExecutionEnvironment.js
18 12 2015 15:24:16.087:WARN [web-server]: 404: /process.js
18 12 2015 15:24:16.148:WARN [web-server]: 404: /process.js
18 12 2015 15:24:16.152:WARN [web-server]: 404: /object-assign.js
18 12 2015 15:24:16.154:WARN [web-server]: 404: /lodash.isarray.js
18 12 2015 15:24:16.163:WARN [web-server]: 404: /lodash.isfinite.js
18 12 2015 15:24:16.204:WARN [web-server]: 404: /fbjs/lib/warning.js
18 12 2015 15:24:16.206:WARN [web-server]: 404: /fbjs/lib/ExecutionEnvironment.js
18 12 2015 15:24:16.441:WARN [web-server]: 404: /fbjs/lib/emptyObject.js
18 12 2015 15:24:16.447:WARN [web-server]: 404: /fbjs/lib/invariant.js
18 12 2015 15:24:16.502:WARN [web-server]: 404: /fbjs/lib/containsNode.js
18 12 2015 15:24:16.522:WARN [web-server]: 404: /fbjs/lib/emptyFunction.js
18 12 2015 15:24:16.530:WARN [web-server]: 404: /fbjs/lib/keyMirror.js
18 12 2015 15:24:16.533:WARN [web-server]: 404: /fbjs/lib/keyOf.js
18 12 2015 15:24:16.689:WARN [web-server]: 404: /fbjs/lib/mapObject.js
18 12 2015 15:24:18.368:WARN [web-server]: 404: /fbjs/lib/shallowEqual.js
18 12 2015 15:24:18.370:WARN [web-server]: 404: /fbjs/lib/EventListener.js
18 12 2015 15:24:18.371:WARN [web-server]: 404: /fbjs/lib/getUnboundedScrollPosition.js
18 12 2015 15:24:18.384:WARN [web-server]: 404: /fbjs/lib/getActiveElement.js
18 12 2015 15:24:18.419:WARN [web-server]: 404: /fbjs/lib/performanceNow.js
18 12 2015 15:24:18.453:WARN [web-server]: 404: /classnames.js
PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR: 'Potentially unhandled rejection [4] Error: XHR error (404 Not Found) loading http://localhost:9876/lodash.isfinite.js
    Error loading http://localhost:9876/lodash.isfinite.js as "lodash.isfinite" from http://localhost:9876/src/jspm_packages/npm/[email protected]/build/react-infinite.js
    at http://localhost:9876/base/src/jspm_packages/system.src.js?6536115be64e0ff966e05546f7767676fa7c03d6:740
    at tryCatchReject (http://localhost:9876/base/src/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:1257)
    at runContinuation1 (http://localhost:9876/base/src/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:1216)
    at http://localhost:9876/base/src/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:1037
    at http://localhost:9876/base/src/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:895
    at http://localhost:9876/base/src/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:171
    at http://localhost:9876/base/src/jspm_packages/system-polyfills.src.js?56a387e9b39188a3e391f91f0b045fcb0074ef81:136'

18 12 2015 15:24:18.558:WARN [web-server]: 404: /fbjs/lib/focusNode.js
18 12 2015 15:24:18.560:WARN [web-server]: 404: /fbjs/lib/hyphenateStyleName.js
18 12 2015 15:24:18.561:WARN [web-server]: 404: /fbjs/lib/camelizeStyleName.js
18 12 2015 15:24:18.562:WARN [web-server]: 404: /fbjs/lib/memoizeStringOnly.js
18 12 2015 15:24:20.627:WARN [web-server]: 404: /fbjs/lib/createNodesFromMarkup.js
18 12 2015 15:24:20.632:WARN [web-server]: 404: /fbjs/lib/getMarkupWrap.js