4

I'm using Karma to test my ES6 code. When I add karma-coverage to the mix, I need to add all the source files for the coverage tool to make a useful report, but when I do that, Karma gives me this error in all browsers:

PhantomJS 1.9.8 (Mac OS X 0.0.0) ERROR

Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

at /var/folders/55/9_128mq95kz1q_2_vwy7qllw0000gn/T/41cf272955d73fbba8ad1df941172139.browserify:46444:0 <- ../../node_modules/react/lib/invariant.js:49:0

My Karma config file is:

basePath: '',
browserNoActivityTimeout: 100000,
frameworks: ['phantomjs-shim', 'mocha', 'chai', 'browserify'],
files: [
  './client/**/*.js',
  './client/**/*.spec.js'
],
exclude: [
  './client/dist/*.js',
],
preprocessors: {
  './client/**/*.js': ['browserify', 'sourcemap', 'coverage']
},
browserify: {
  debug: true,
  transform: [
    ['babelify', {
        optional: ["runtime"],
        plugins: ["rewire"]
    }],
  ]
},
coverageReporter: {
  instrumenters: { isparta : require('isparta') },
  instrumenter: {
    '**/*.js': 'isparta'
  },
  type : 'html',
  dir : './coverage/'
},
reporters: ['mocha', 'coverage'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
browsers: ['Chrome', 'Firefox', 'Safari', 'PhantomJS'],
singleRun: true

If I remove './client/**/*.js', from the files array, the tests work, but then the coverage only show me the tests code. I use Karma from gulp with gulp-karma, but I suppose that this doesn't have anything to do with the problem.

Grant Miller
  • 27,532
  • 16
  • 147
  • 165
Roc
  • 2,500
  • 2
  • 15
  • 18
  • 1
    This seems to be an error related to the `_registerComponent` method than coverage itself. Also, your preprocessor for `'./client/**/*.js'` is going to run coverage on all of your code, including your spec files. The best way to debug the error is to set `singleRun` to `false` and view the browser that is running the test. In there you'll see a "debug" button which opens another window. From there you inspect the actual code running under test. As for fixing the coverage issue, I'm working on that myself haven't found an actual solution. I'm curious to see what errors you get once you fix this – Spencer Carnage Jun 10 '15 at 19:57
  • Thanks for the help, the actual problem seems to be an error with the Browserify plugin of karma which don't map correctly the dependencies. I think that for the time being I will do without coverage in my tests as I have other priorities right now. – Roc Jun 12 '15 at 13:09
  • 1
    The struggle is real with this one... Been trying to figure this out for some time now. – Glitches Dec 29 '15 at 00:35
  • 1
    Having a very similar problem and created an question for it http://stackoverflow.com/questions/36670645/test-coverage-react-istanbul-registercomponent-target-container-is-not ... I have a workaround described in the question that may help you. – Benjamin Conant Apr 16 '16 at 23:05
  • Thanks @BenjaminConant, I will look it up. – Roc Apr 19 '16 at 20:51

2 Answers2

0

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.

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

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

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

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!

fxlemire
  • 874
  • 9
  • 21
0

Code you are covering is trying to render component into DOM node. Your code relys that it already exists (somewhere in index.html or whatever). But PhantomJS cannot find that DOM node. You should create it before calling ReactDOM.render or search how to change template of html page used by phantom to run tests (there are plugins doung this).

And1
  • 33
  • 1
  • 6