Javascript Karma单元测试：模块名称；“反应”；尚未加载上下文：\的。使用require（[]）
我正在尝试为react建立单元测试框架。执行此操作时，发生了以下错误。我在互联网上到处搜索，没有找到有效的解决方案。下面是显示的错误和我正在使用的代码/包 调试错误Javascript Karma单元测试：模块名称；“反应”；尚未加载上下文：\的。使用require（[]）,javascript,unit-testing,reactjs,requirejs,karma-jasmine,Javascript,Unit Testing,Reactjs,Requirejs,Karma Jasmine,我正在尝试为react建立单元测试框架。执行此操作时，发生了以下错误。我在互联网上到处搜索，没有找到有效的解决方案。下面是显示的错误和我正在使用的代码/包 调试错误 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
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"
}
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,
}
})
}
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);
});
});
非常感谢您的帮助 当您使用CommonJS表单（
require（'modX'）require（['modX']，function（modX）{…}）requirevar modX = require('modX');
// rest of the module
define(function (require) {
var modX = require('modX');
// rest of the module
});
您的设置是这样的，实际上，Babel正在将ES6模块转换为使用
requiredefineBabel-plugin-transform-es2015-modules-AMDtransform-es2015-modules-AMDrequire（'modX'）require（['modX']，function（modX）{…}requiredefinevar modX = require('modX');
// rest of the module
define(function (require) {
var modX = require('modX');
// rest of the module
});
您的设置是这样的，实际上，Babel正在将ES6模块转换为使用
requiredefineBabel-plugin-transform-es2015-modules-AMDtransform-es2015-modules-AMD