Jasmine Tests给出错误“Uncaught ReferenceError：require is not defined”" [英] Jasmine Tests give error "Uncaught ReferenceError: require is not defined"

问题描述

我正在尝试在我的React网站上使用Karma运行Jasmine测试。我之前的测试工作正常，我不确定发生了什么变化，但现在我收到了错误：

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:

未捕获的ReferenceError：require不是定义

Chrome和PhantomJS和Firefox给我类似的错误。如果有更多信息可以提供帮助，请与我们联系。我在网上发现了很多类似的问题，但没有解决问题的方法。

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.

你可以在下面看到测试文件，整个项目在我的github回购。

You can see the test file below and the full project is on my github repo.

谢谢提前！

我的测试文件如下所示：

My test file looks like this:

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

  });

我的karma.conf.js文件如下所示：

My karma.conf.js file looks like this:

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

这是我在推荐更改@guilhebl后得到的错误：

This is the error I get after making the changes @guilhebl recommended:

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

这是我做出更改后的karma.conf.js：

Here is the karma.conf.js after I made the changes:

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

推荐答案

您应该在karma.conf文件，例如：

You should have require configured in your karma.conf file such as example:

module.exports = function(config){
  config.set({
    frameworks: ['jasmine'],

    plugins : [               
               'karma-chrome-launcher',
               'karma-firefox-launcher',                            
               'karma-script-launcher',
               'karma-phantomjs-launcher',
               'karma-jasmine',
               'karma-requirejs'               
    ],

    files : [          
      'node_modules/requirejs/require.js',
      'node_modules/karma-requirejs/lib/adapter.js',      
      'app/js/test-main.js',

      {pattern: 'app/lib/**/*.js', included: false},
      {pattern: 'app/js/**/*.js', included: false},      
      {pattern: 'app/js/views/**/*Test.js', included: false}      
    ],

    browsers: ['PhantomJS']        
  });
};

这篇关于Jasmine Tests给出错误“Uncaught ReferenceError：require is not defined”"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！