我有这个Karma配置（使用React 16.2.0）：
const isArray = require('lodash/lang/isArray');
const merge = require('lodash/object/merge');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
/**
* Base karma configuration.
* The properties stated here will be common for every other configuration. This will serve as a
* point of reuse for a local coverage configuration, and a different CI coverage configuration.
* @type {Object}
*/
const ALL_FILES = [
// 'test/react-throw-on-error.js',
'./node_modules/phantomjs-polyfill/bind-polyfill.js',
'./node_modules/jquery/dist/jquery.js',
'test/allTests.js'
];
var baseConf = {
plugins: [
'karma-coverage',
'karma-webpack',
'sass-loader',
'karma-chrome-launcher',
'karma-phantomjs-launcher',
'karma-mocha-reporter',
'karma-mocha'
],
// 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: ['mocha'],
// list of files / patterns to load in the browser
files: ALL_FILES,
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
preprocessors: {
'test/allTests.js': ['webpack']
},
client: {
captureConsole: true
},
webpack: {
plugins: [
new CaseSensitivePathsPlugin(),
new ExtractTextPlugin('style.css'),
new webpack.DefinePlugin({
'__ENVIRONMENT__': '"DEV"',
'__DEBUG_MODE__': true,
'__BASE_HOST__': JSON.stringify(process.env.BASE_HOST || '') ,
'__MOCK_ALL_ENDPOINTS__': JSON.stringify(process.env.MOCK_ALL_ENDPOINTS || ''),
'__MOCKED_ENDPOINTS__': JSON.stringify(process.env.MOCKED_ENDPOINTS || ''),
'__PUBLIC_URL__': JSON.stringify(process.env.PUBLIC_URL || ''),
'__REDIRECTED_ENDPOINTS__': JSON.stringify(process.env.REDIRECTED_ENDPOINTS || ''),
'__LOG_API_ERRORS_REMOTELY__': JSON.stringify(process.env.LOG_API_ERRORS_REMOTELY || ''),
'__SHOW_API_ERRORS__': JSON.stringify(process.env.SHOW_API_ERRORS || '')
})
],
module: {
preLoaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel',
query: {
presets: ['react', ["es2015", {"loose": true}]],
plugins: ['array-includes'],
cacheDirectory: true
}
},
{
test: /\.?css$/,
loader: ExtractTextPlugin.extract(
"style",
"css!sass")
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
},
{
test: /\.json$/,
loader: 'json'
}
]
},
resolve: {
root: [path.resolve('src'), path.resolve('test')],
modulesDirectories: ['node_modules'],
alias: {
commonsComponents: 'commons-components/build',
commonsUtilities: 'commons-components/src/lib/utilities',
stylesOpenBank: 'styles-openbank/src/styles/_base.scss',
stylesOpenBankApp: 'styles-openbank/src/styles/_app.scss',
stylesOpenBankBootstrap: 'styles-openbank/src/styles/_bootstrap.scss',
stylesOpenBankAssests: 'styles-openbank/src/assets'
}
},
externals: {
'react/addons': true,
'react-addons-test-utils': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
},
babelPreprocessor: {
options: {
presets: ['airbnb']
}
}
},
webpackMiddleware: {
noInfo: true,
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['mocha'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// 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: ['Chrome'],
// 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,
// Increments how long will Karma wait for a message from a browser before disconnecting from it (in ms).
browserNoActivityTimeout: 60000
};
/**
* Helper to provide lodash merge with deep array merging
*/
function customizer(objValue, srcValue) {
if (isArray(objValue)) {
return objValue.concat(srcValue);
}
}
/**
* Base Karma configuration for running a coverage analysis.
* Based on the base config, this one is an extension to add all data is needed for a coverage
* instrumentation. It is also a base config, as it will be reused in a local and a CI coverage task.
* @type {Object}
*/
var coverageConf = merge({}, baseConf, {
webpack: {
isparta: {
embedSource: true,
noAutoWrap: true,
babel: {
presets: ['es2015', 'react']
}
},
module: {
preLoaders: [
{
test: /\.js$/,
include: path.resolve('src'),
loader: 'isparta-loader'
}
]
}
},
coverageReporter: {
type: 'lcov',
dir: 'test/coverage/'
},
reporters: ['coverage']
}, customizer);
module.exports.baseConf = baseConf;
module.exports.coverageConf = coverageConf;
我收到以下控制台错误：
{ “message”：“未捕获的ReferenceError：未定义插件\ nat test / allTests.js：81672：8 \ n \ nReferenceError：未定义插件\ n \
在Object.defineProperty.value（test / allTests.js：84455：18）\ n at webpack_require （test / allTests.js:20:30）\ n at test / allTests.js：81668：20 \ n at Object.defineProperty.value （test / allTests.js：81732：6）\ n webpack_require （test / allTests.js:20:30）\ n在Object。 （test / allTests.js：79742：21）\ n在Object处。 （test / allTests.js：80112：31）\ n webpack_require （test / allTests.js:20:30）\ n在Object。 （test / allTests.js：77771：15）\ n webpack_require （试验/ allTests.js：20：30）”， “str”：“未捕获的ReferenceError：未定义插件\ nat test / allTests.js：81672：8 \ n \ n参考错误：未定义插件\ n \
在Object.defineProperty.value（test / allTests.js：84455：18）\ n at webpack_require （test / allTests.js:20:30）\ n at test / allTests.js：81668：20 \ n at Object.defineProperty.value （test / allTests.js：81732：6）\ n webpack_require （test / allTests.js:20:30）\ n在Object。 （test / allTests.js：79742：21）\ n在Object处。 （test / allTests.js：80112：31）\ n webpack_require （test / allTests.js:20:30）\ n在Object。 （test / allTests.js：77771：15）\ n webpack_require （test / allTests.js:20:30）“}
此错误的来源是什么？
答案 0 :(得分：1)
react-addons-test-utils与React 16不兼容。正如npm页面所说，TestUtils已被转移到react-dom / test-utils。请参阅Facebook's test-utils docs。