React testing error. Target container is not a DOM element

问题

I want to write unit test for my react app. The first unit test I wrote is as follow

it('renders without crashing', () => {
  const div = document.getElementById('root');
  ReactDOM.render(<Index />, div);
});

However I got the error

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

I have to say that the application I wrote actually has no such error, if I run it with npm start This error only exists when I test my program with unit test. I'm wondering how to fix this problem?

Here is the index.js file for root div rendering

import React from 'react';
import { Provider } from 'react-redux';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import '../style/style.css';
import configurationStore from './store/configurationStore';

const store = configurationStore();

// TODO: Comments;

render (
  <Provider store={store}>
    <Router history={browserHistory} routes={routes}/>
  </Provider>,
  document.getElementById('root')
  );

and here is my html file

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLjwDjIMWnBb8C6Nrc-38HcWfVK5nmVhM&libraries=places"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
    <script src="https://cdn.auth0.com/js/lock/10.6/lock.min.js"></script>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>React App</title>
  </head>
  <body>
    <img alt="background image" src="http://www.viudigital.com/images/viu_bg_temp.jpg?crc=524745911" id="fullscreen" />
    <div id="root"></div>
  </body>
</html>

Solution: I found the solution to solve this error. To fix it, just wrap the component we want to test into the root component. This is a test example

test('Header component rendered properly', () => {
    const tree = renderer.create(
      <App>
      <Header />
      </App>
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });

回答1:

Unless you have explicitly loaded your html file into the document, jest would be unable to locate that root element. And in a unit test, it would be best not to include anything more than you need.

You can create a documentFragment and render the element onto it for testing like this:

it('renders without crashing', () => {
  const div = document.createElement('div'); // create the div here
  ReactDOM.render(<Index />, div);
});

来源：https://stackoverflow.com/questions/44685831/react-testing-error-target-container-is-not-a-dom-element

标签

javascript

node.js

unit-testing

reactjs

testing