如何解决业力单元测试:尚未为上下文_加载模块名称“ react”使用require[]
当您require
以Commonjs形式(require('modX')
)而不是AMD形式(require(['modX'], function
(modX) {...})
)进行调用时,您所描述的错误正是RequireJS给您的,
调用没有被封装进来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插件列表中。请参阅此处的文档。
解决方法
我正在尝试建立反应的单元测试框架。这样做时,发生以下错误。我搜索了整个互联网,但没有有效的解决方案。下面是显示的错误和我正在使用的代码/软件包。
调试错误
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);
});
});
非常感谢您的帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。