测试覆盖面React，伊斯坦布尔-_registerComponent（...）：目标容器不是DOM元素 [英] Test Coverage React, Istanbul -_registerComponent(...): Target container is not a DOM element

问题描述

我正在用react / redux / webpack编写一个应用程序。我正在使用业力，摩卡咖啡进行测试，并希望将伊斯坦布尔用于测试范围。为了尝试使用karma-coverage，我设置了以下 karma.config.js

I am writing an app with react / redux / webpack. I am building out my testing with karma, mocha and want to use istanbul for test coverage. In an attempt to get coverage to work with karma-coverage I have set up the following 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 。看起来像这样

karma's entry point is just test/index.js. Which looks like this

// 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

As您可以从过时的评论中看到。如果包含 index.jsx ，则在运行测试时，我会得到...

As you can see from the dated comment. If index.jsx is included, when I run the tests I get ...

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')
)

我已经进入反应生态系统大约一个星期了，所以几乎可以肯定我做了一些愚蠢的事情，但这花费了很多时间，而且帮助很大

I am about one week into the react ecosystem and so am almost certainly doing something silly but this has taken up many hours and help would greatly appreciated!

推荐答案

我遇到了同样的问题，在我的案例中，这是因为React无法找到需要的元素

I had that same problem, which in my case occurred because React couldn't find the element in which it needed to render the html.

我找到了一个快速解决方案，方法是在我的主要js文件中添加以下if语句：

I found a quick fix by adding the following if statement into my main js file:

if ($('#app').length <= 0) {
  $('body').prepend('<div id="app"></div>');
}

ReactDom.render(
  <App />,
  document.getElementById('app')
);

我知道这不一定是解决问题的最佳方法，但至少它可以解决现在。如果有人知道更好的方法，请告诉我们！

I'm aware this must not be the best way of fixing it, but at least it works for now. If anyone knows of a better way, please let us know!

我还将此解决方案发布在您在评论中提到的线程上。

I've also posted this solution on the thread you mentioned in your comment.

这篇关于测试覆盖面React，伊斯坦布尔-_registerComponent（...）：目标容器不是DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！