我正在尝试设置单元测试框架以进行反应。执行此操作时,发生以下错误。我在互联网上搜索过没有正常工作的解决方案。以下是显示的错误和我正在使用的代码/包。
调试错误
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);
});
});
非常感谢帮助!
答案 0 :(得分:5)
您描述的错误正是您在CommonJS表单(require
)而不是AMD表单(require('modX')
)进行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
});
您的设置正在发生的事情是,Babel正在将ES6模块转换为使用require
而不使用define
包装器的模块。为了让Babel输出正确的AMD模块,您需要安装babel-plugin-transform-es2015-modules-amd
并将transform-es2015-modules-amd
添加到您的Babel插件列表中。请参阅文档here。