title: Karma unit testing: Module name "react" has not been loaded yet for context: _. Use require([])
body: <p>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.</p>
  
  <p>debug error</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>node packages</p>
  
  <pre><code>  "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"
    }
  </code></pre>
  
  <p>karma.conf.js</p>
  
  <pre><code>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,
      }
    })
  }
  </code></pre>
  
  <p>tests/test.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  describe('Testing', ()=&gt;{
      it('sample test', ()=&gt;{
          var v = 2;
          var parts = ['shoulders', 'knees'];
          var lyrics = ['head', ...parts, 'and', 'toes'];
          expect(v).toEqual(2); 
      }); 
  });
  </code></pre>
  
  <p>Help is greatly appreciated!</p>