2015-08-21 56 views
4

我想在我的React網站上運行茉莉花測試與Karma。我的測試工作之前,我不知道發生了什麼變化,但現在我得到的錯誤:茉莉花測試給出的錯誤「未捕獲ReferenceError:需求未定義」

Uncaught ReferenceError: require is not defined

Chrome和PhantomJS和Firefox給我同樣的錯誤。請讓我知道,如果更多的信息會有所幫助。我在網上發現了很多類似的問題,但沒有解決問題。

您可以在下面看到測試文件,完整的項目在my github repo

在此先感謝!

我的測試文件看起來像這樣:

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文件看起來像這樣:

// 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推薦:

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後,我所做的更改:

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

+0

I t看起來你的webpack構建可能會發生什麼 - webpack應該定義require並將它提供給你的js文件。你有沒有在webpack設置中使用任何東西? – theWanderer4865

+0

感謝theWanderer4865。除此之外,我還沒有對webpack做任何事情。我將我的karma.conf.js文件添加到我的問題中,以便查看它的設置。 – CascadiaJS

回答

1

你應該有要求配置在你的karma.conf文件中,例如:

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

謝謝guilhebl。我編輯了我的karma.conf.js以使用像你顯示的karma-requirejs和requirejs,但是現在我得到錯誤 '''未捕獲的錯誤:模塊名稱「react/addons」尚未加載上下文:_。使用require([])''' – CascadiaJS

+0

@CascadiaJS你可以用你得到的堆棧跟蹤記錄來更新你的問題嗎? – theWanderer4865

相關問題