Karma單元測試：模塊名稱「react」尚未加載上下文：_。使用require（[]）

Question

我正在嘗試爲響應設置單元測試框架。在這樣做的時候，發生了以下錯誤。我在互聯網上搜索了所有沒有解決方案的工作。下面是顯示的錯誤和我正在使用的代碼/包。

調試錯誤

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) 

節點包

"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, 
    } 
    }) 
} 

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

非常感謝幫助！

Answer 1

您所描述的錯誤正是RequireJS給你時你在CommonJS的形式（require('modX')）一require呼叫，而不是AMD的形式（require(['modX'], function (modX) {...})），和呼叫而不被包裹在define完成。 RequireJS爲使用CommonJS表單提供了一些支持，但開發人員必須完成的工作量極少，以確保其正常工作。以此開頭的腳本將不起作用：

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

您收到您收到的錯誤消息。你需要這個來代替：

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

這是怎麼回事您的設置是，因爲它是，巴貝爾正在改變ES6模塊到使用require沒有define包裝的東西。爲了讓Babel輸出適當的AMD模塊，您需要安裝babel-plugin-transform-es2015-modules-amd並將transform-es2015-modules-amd添加到您的Babel插件列表中。請參閱文檔here。