Karma单元测试：模块名称“反应”尚未加载上下文：_。使用require（[]） [英] Karma unit testing: Module name "react" has not been loaded yet for context: _. Use require([])
问题描述
我正在尝试设置单元测试框架以进行反应。执行此操作时，发生以下错误。我在互联网上搜索过没有正常工作的解决方案。以下是显示的错误和我正在使用的代码/包。
I am trying to set up the unit testing framework for react. While doing so, the following error has occurred. I have searched all over the internet with no solution that is working. below are the errors shown and code/packages that I am using.
调试错误
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
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,
}
})
}
tests / test.js
tests/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);
});
});
非常感谢帮助！
推荐答案
当您在CommonJS表单中进行 require 调用时，您描述的错误正是RequireJS给您的错误（ require （'modX'））而不是AMD表格（ require（['modX']，function（modX）{...}） ），和调用完成后不会包含在 define 中。 RequireJS为使用CommonJS表单提供了一些支持，但开发人员必须完成最少的工作才能确保它正常工作。以此开头的脚本将不起作用：
The error you describe is exactly what RequireJS gives you when you have a require call in the CommonJS form (require('modX')) instead of the AMD form (require(['modX'], function (modX) {...})), and the call is done without being wrapped in define. RequireJS provides some support for using the CommonJS form, but there is a minimum of work that must be done by the developer to ensure that it works. A script that starts with this won't work:
var modX = require('modX');
// rest of the module
您收到错误消息。你需要这个：
You get the error message you got. You need this instead:
define(function (require) {
var modX = require('modX');
// rest of the module
});
您的设置正在发生的事情是，Babel正在将ES6模块转换为在没有 define 包装器的情况下使用 require 的东西。为了让Babel输出正确的AMD模块，你需要安装 babel-plugin-transform-es2015-modules-amd 并添加 transform-es2015 -modules-amd 到您的Babel插件列表中。请参阅此处文档。
What is going on with your setup is that, as it is, Babel is transforming the ES6 modules into something that uses require without the define wrapper. In order to get Babel to output proper AMD modules, you need to install babel-plugin-transform-es2015-modules-amd and add transform-es2015-modules-amd to your list of Babel plugins. See the documentation here.
这篇关于Karma单元测试：模块名称“反应”尚未加载上下文：_。使用require（[]）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
