javascript - Karma unit testing: Module name "react" has not been loaded yet for context: _. Use require([])

Question

I am trying to set up the unit testing framework for react. While doing so, the following error has occurred. I have searched all over the internet with no solution that is working. below are the errors shown and code/packages that I am using.

debug error

04 03 2016 04:48:46.340:DEBUG [phantomjs.launcher]: Error: Module name "react" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded


04 03 2016 04:48:46.341:DEBUG [phantomjs.launcher]:   http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:140 in defaultOnError
  http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:544 in onError
  http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1429 in localRequire
  http://localhost:9876/base/node_modules/requirejs/require.js?6f53c895855c3743ac6fb7f99afc63ca5cdfd300:1791 in requirejs

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Module name "react" has not been loaded yet for context: _. Use require([])
  http://requirejs.org/docs/errors.html#notloaded
  at /Users/lebeier/Documents/iMARS/node_modules/requirejs/require.js:140
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.053 secs / 0 secs)

node packages

  "dependencies": {
    "bootstrap": "^3.3.6",
    "highcharts": "^4.2.1",
    "history": "^1.17.0",
    "jquery": "^2.2.0",
    "js-cookie": "^2.1.0",
    "react": "^0.14.6",
    "react-bootstrap": "^0.28.2",
    "react-bootstrap-table": "^1.4.5",
    "react-data-components": "^0.6.0",
    "react-dom": "^0.14.6",
    "react-highcharts": "^6.0.0",
    "react-notification-system": "^0.2.6",
    "react-router": "^1.0.3",
    "reactify": "^1.1.1",
    "toastr": "^2.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.6.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.5.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "core-js": "^2.1.3",
    "grunt-template-jasmine-requirejs": "^0.2.3",
    "jasmine": "^2.4.1",
    "karma": "^0.13.21",
    "karma-babel-preprocessor": "^6.0.1",
    "karma-browserify": "^5.0.2",
    "karma-cli": "^0.1.2",
    "karma-coverage": "^0.5.4",
    "karma-jasmine": "^0.3.7",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-requirejs": "^0.2.5",
    "karma-webpack": "^1.7.0",
    "node-sass": "^3.4.2",
    "phantomjs-prebuilt": "^2.1.4",
    "requirejs": "^2.1.22",
    "uglify": "^0.1.5",
    "watchify": "^3.7.0",
    "webpack": "^1.12.14"
  }

karma.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: ['jasmine', 'requirejs'],


  // list of files / patterns to load in the browser
  files: [
      'tests/*.js'
      //{ pattern: 'tests.webpack.js', watched: false }, 
  ],

  // list of files to exclude
  //exclude: [
  //  './node_modules/'
  //],

  plugins: [
    'karma-jasmine',
    'karma-requirejs',
    'karma-phantomjs-launcher',
    'karma-babel-preprocessor',
    'karma-coverage',
    'karma-browserify',
    'karma-webpack'
  ],

  // preprocess matching files before serving them to the browser
  // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
  preprocessors: {
    'core/static/core/js/*.js' : ['babel'],
    'tests/*.js' : ['babel'],
    'tests.webpack.js': [ 'webpack']
  },

  babelPreprocessor:{
    options: {
        presets: ['es2015', 'react'],
        plugins: ["transform-object-rest-spread"],
        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: ['dots'],


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


  // 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: true,

  // Concurrency level
  // how many browser should be started simultaneous
  concurrency: Infinity,

  webpack: {
    devtool: 'inline-source-map',
    modules: {
        loaders: [
            {
                test: /.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader',
                query:{
                    presets: ['es2015', 'react']
                }
            }
        ],
      },
      watch: true,
    },

    webpackServer: {
      noInfo: true,
    }
  })
}

tests/test.js

import React from 'react';
import ReactDOM from 'react-dom';

describe('Testing', ()=>{
    it('sample test', ()=>{
        var v = 2;
        var parts = ['shoulders', 'knees'];
        var lyrics = ['head', ...parts, 'and', 'toes'];
        expect(v).toEqual(2); 
    }); 
});

Help is greatly appreciated!

Answer 1

The error you describe is exactly what RequireJS gives you when you have a require call in the CommonJS form (require('modX')) instead of the AMD form (require(['modX'], function (modX) {...})), and the call is done without being wrapped in define. RequireJS provides some support for using the CommonJS form, but there is a minimum of work that must be done by the developer to ensure that it works. A script that starts with this won't work:

var modX = require('modX');
// rest of the module

You get the error message you got. You need this instead:

define(function (require) {
    var modX = require('modX');
    // rest of the module
});

What is going on with your setup is that, as it is, Babel is transforming the ES6 modules into something that uses require without the define wrapper. In order to get Babel to output proper AMD modules, you need to install babel-plugin-transform-es2015-modules-amd and add transform-es2015-modules-amd to your list of Babel plugins. See the documentation here.