我正在使用react / redux / webpack编写应用程序。我正在用业力，摩卡建立我的测试，并希望使用伊斯坦布尔进行测试覆盖。为了让覆盖范围与karma-coverage一起使用，我设置了以下karma.config.js
var argv = require('yargs').argv;
var path = require('path');
var webpack = require('webpack');
const PATHS = {
test: path.join(__dirname, 'test'),
app: path.join(__dirname, 'app'),
}
module.exports = function(config) {
config.set({
// only use PhantomJS for our 'test' browser
browsers: ['PhantomJS'],
// just run once by default unless --watch flag is passed
singleRun: !argv.watch,
// which karma frameworks do we want integrated
frameworks: ['mocha', 'chai'],
// include some polyfills for babel and phantomjs
files: [
'node_modules/babel-polyfill/dist/polyfill.js',
'./node_modules/phantomjs-polyfill/bind-polyfill.js',
// './test/**/*.js', // specify files to watch for tests,
'test/index.js',
],
preprocessors: {
// these files we want to be precompiled with webpack
// also run tests through sourcemap for easier debugging
// 'test/*.spec.js': ['webpack'],
'test/index.js': ['webpack', 'sourcemap']
},
// A lot of people will reuse the same webpack config that they use
// in development for karma but remove any production plugins like UglifyJS etc.
// I chose to just re-write the config so readers can see what it needs to have
webpack: {
devtool: 'inline-source-map',
resolve: {
// allow us to import components in tests like:
// import Example from 'components/Example';
root: PATHS.app,
// allow us to avoid including extension name
extensions: ['', '.js', '.jsx'],
// required for enzyme to work properly
alias: {
'sinon': 'sinon/pkg/sinon'
}
},
module: {
// don't run babel-loader through the sinon module
noParse: [
/node_modules\/sinon\//
],
preLoaders: [
// instrument only testing sources with Istanbul
// {
// test: /\.js$/,
// include: path.resolve('app/'),
// exclude: /node_modules/,
// loader: 'istanbul-instrumenter'
// }
{
test: /\.jsx?$/,
exclude: [/node_modules/, /test/],
loader: 'isparta-instrumenter-loader'
},
],
// run babel loader for our tests
loaders: [
{
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', 'survivejs-kanban']
}
},
],
},
// required for enzyme to work properly
externals: {
'jsdom': 'window',
'cheerio': 'window',
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': 'window'
},
},
// displays tests in a nice readable format
reporters: ['spec', 'coverage'],
webpackMiddleware: {
noInfo: true
},
// tell karma all the plugins we're going to be using to prevent warnings
plugins: [
'karma-mocha',
'karma-chai',
'karma-webpack',
'karma-phantomjs-launcher',
'karma-spec-reporter',
'karma-sourcemap-loader',
'karma-coverage'
]
});
};
业力的切入点只是test/index.js。看起来像这样
// require all the tests so they will run.
const testsContext = require.context('.', true, /spec/);
testsContext.keys().forEach(testsContext);
// require all the .js and .jsx files in app so they will be included in coverage
const componentsContext = require.context('../app/', true, /jsx?$/);
// Date: April 16 2016
// Author: Benjamin Conant
// componentsContext.keys() is an array that includes file paths for all the
// .js and .jsx files in ./app .... karma fails with
// PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
// Invariant Violation: _registerComponent(...): Target container is not a DOM element.
// at /Users/benconant/Dev/MyFin/my-fin-front-end/test/index.js:15283 <- webpack:///~/react/~/fbjs/lib/invariant.js:45:0
// if the entry point index.jsx file is included. Seems to have somthing
// to do with trying to actually write to the DOM. So, I filter out index.jsx and the tests run very well.
// This means that we will probubly not be able to test index.jsx until this is solved.
let componentsContextKeysWithoutIndexJsx = componentsContext.keys().filter(function (filePath) { return filePath !== './index.jsx' });
componentsContextKeysWithoutIndexJsx.forEach(componentsContext);
// componentsContext.keys().forEach(componentsContext); --- the way it should be if we did not have to remove ./index.jsx
从日期评论中可以看出。如果包含index.jsx，那么当我运行测试时，我得到......
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Invariant Violation: _registerComponent(...): Target container is not a DOM element.
at /Users/benconant/Dev/MyFin/my-fin-front-end/test/index.js:15283 <- webpack:///~/react/~/fbjs/lib/invariant.js:45:0
这是我的index.jsx以供参考
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';;
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Router, Route, Link, browserHistory, hashHistory, IndexRoute } from 'react-router';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
import configureStore from './store/configureStore';
import todoApp from './reducers';
import App from './containers/app/App';
import IntroSlides from './containers/IntroSlides';
import LandingPage from './containers/LandingPage';
let store = configureStore();
const history = process.env.HASH_ROUTING ? syncHistoryWithStore(hashHistory, store) : syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={LandingPage} />
<Route path="intro" component={IntroSlides}/>
</Route>
</Router>
</Provider>,
document.getElementById('app')
)
我大约有一个星期进入反应生态系统，因此我几乎肯定会做一些愚蠢的事情，但这需要花费很多时间，并且非常感谢帮助！
答案 0 :(得分：1)
我有同样的问题，在我的情况下发生了，因为React无法找到需要渲染html的元素。
我通过在主js文件中添加以下if语句找到了一个快速解决方法：
if ($('#app').length <= 0) {
$('body').prepend('<div id="app"></div>');
}
ReactDom.render(
<App />,
document.getElementById('app')
);
我知道这绝不是修复它的最好方法，但至少它现在有效。如果有人知道更好的方法，请告诉我们！
我也在你评论中提到的帖子上发布了这个解决方案。