Karmaunit testing:模块名称“react”尚未加载上下文:_。 使用require()

我正在尝试设置unit testing框架进行反应。 这样做时发生以下错误。 我已经search了所有的互联网没有解决scheme正在工作。 下面是显示的错误和我正在使用的代码/包。

debugging错误

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

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

非常感谢帮助!

你所描述的错误正是RequireJS在CommonJS表单( require('modX')require调用时给你的,而不是AMD表单( require(['modX'], function (modX) {...}) ), 并且调用完成而不被包装在define 。 RequireJS为使用CommonJS表单提供了一些支持,但开发人员必须完成的工作量极less,以确保其正常工作。 以此开始的脚本将不起作用:

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

你得到了你得到的错误信息。 你需要这个:

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

你的设置正在进行的是,Babel正在将ES6模块转换成使用require而没有define包装器的东西。 为了让Babel输出适当的AMD模块,您需要安装babel-plugin-transform-es2015-modules-amd并将transform-es2015-modules-amd到您的Babel插件列表中。 请参阅这里的文档。