title: Jasmine Tests give error "Uncaught ReferenceError: require is not defined"
body: <p>I am trying to run Jasmine tests with Karma on my React site. My tests were working before, and I'm not sure what has changed, but now I get the error:</p>
  
  <p><code>Uncaught ReferenceError: require is not defined</code></p>
  
  <p>for Chrome and PhantomJS and Firefox give me similar errors. Please let me know if more info would be helpful. I have found a lot of similar questions on the web, but nothing that fixes the problem.</p>
  
  <p>You can see the test file below and the full project is on <a href="https://github.com/mrbgit/short-stories/tree/branch" rel="nofollow">my github repo</a>.</p>
  
  <p>Thanks in advance!</p>
  
  <p>My test file looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var React = require('react/addons');
  var Story = require('../../app/js/components/story.jsx');
  var TestUtils = React.addons.TestUtils;
  var testUtilsAdditions = require('react-testutils-additions');
  
    describe('Story component', function () {
      var component;
  
      beforeEach(function () {
        var element = React.createElement(Story);
        element.props.data = {
          storyTitle: 'front end test title',
          author : 'front end author',
          storyText : 'front end story text'
        };
        component = TestUtils.renderIntoDocument(element);
        });
  
      it('should display a story', function () {
        expect(component.props.data).toBeDefined();
        expect(component.props.data.storyTitle).toBeDefined();
        expect(component.props.data.storyTitle).toBe('front end test title');
        expect(component.props.data.author).toBe('front end author');
        expect(component.props.data.storyText).toBe('front end story text');
      });
  
    });</code></pre>
  </div>
  </div>
  </p>
  
  <p>My karma.conf.js file looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Karma configuration
  // Generated on Thu Jul 02 2015 15:56:34 GMT-0700 (PDT)
  
  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'],
  
  
      // list of files / patterns to load in the browser
      files: [
      './node_modules/phantomjs-polyfill/bind-polyfill.js',
          'test/karma_tests/*test.js'
      ],
  
      //plugins to start browsers
      plugins : [
      'karma-junit-reporter',
      'karma-phantomjs-launcher',
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-opera-launcher',
      'karma-ie-launcher',
      'karma-jasmine',
      'karma-chai',
      'karma-webpack'
      ],
  
  
      // 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/karma_tests/*test.js': ['webpack'],
          // 'test/**/*_test.js': ['webpack']
      },
  
      webpack: {
              // karma watches the test entry points
              // (you don't need to specify the entry option)
              // webpack watches dependencies
  
              // webpack configuration
          module: {
            loaders: [{
              test: /\.jsx$/,
              loader:'jsx-loader'
            }]
          }
          },
  
  
      // 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: false,
  
  
      // start these browsers
      // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
      browsers: ['Chrome', 'Firefox', 'PhantomJS'],
  
  
      // Continuous Integration mode
      // if true, Karma captures browsers, runs the tests and exits
      singleRun: true
    });
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the error I get after making the changes @guilhebl recommended:</p>
  
  <pre><code>Firefox 40.0.0 (Ubuntu 0.0.0) ERROR
    Error: Module name "react/addons" has not been loaded yet for context: _. Use require([])
    http://requirejs.org/docs/errors.html#notloaded
    at /home/michael/repository/short-stories/node_modules/requirejs/require.js:165
  </code></pre>
  
  <p>Here is the karma.conf.js after I made the changes:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Karma configuration
  // Generated on Thu Jul 02 2015 15:56:34 GMT-0700 (PDT)
  
  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'],
  
  
      // list of files / patterns to load in the browser
      files: [
      './node_modules/phantomjs-polyfill/bind-polyfill.js',
      './node_modules/requirejs/require.js',
      './node_modules/karma-requirejs/lib/adapter.js',
      './test/karma_tests/*test.js'
      ],
  
      //plugins to start browsers
      plugins : [
      'karma-junit-reporter',
      'karma-phantomjs-launcher',
      'karma-chrome-launcher',
      'karma-firefox-launcher',
      'karma-opera-launcher',
      'karma-ie-launcher',
      'karma-jasmine',
      'karma-chai',
      'karma-webpack',
      'karma-requirejs',
      'karma-script-launcher'
      ],
  
  
      // 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/karma_tests/*test.js': ['webpack'],
          // 'test/**/*_test.js': ['webpack']
      },
  
      webpack: {
              // karma watches the test entry points
              // (you don't need to specify the entry option)
              // webpack watches dependencies
  
              // webpack configuration
          module: {
            loaders: [{
              test: /\.jsx$/,
              loader:'jsx-loader'
            }]
          }
          },
  
  
      // 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: false,
  
  
      // start these browsers
      // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
      browsers: ['Chrome', 'Firefox', 'PhantomJS'],
  
  
      // Continuous Integration mode
      // if true, Karma captures browsers, runs the tests and exits
      singleRun: true
    });
  };</code></pre>
  </div>
  </div>
  </p>