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="http://ift.tt/2eBd7UN"></script>
<script src="http://ift.tt/2sBZ7S3"></script>
<link href="http://ift.tt/1fgkMjW" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://ift.tt/2evDajZ">
<!-- Optional theme -->
<link rel="stylesheet" href="http://ift.tt/2hLLJHj">
<script src="http://ift.tt/2ge3KOI"></script>
<script src="http://ift.tt/1bMh26W" async defer></script>
<script src="http://ift.tt/2aHTozy"></script>
<title>React App</title>
</head>
<body>
<img alt="background image" src="http://ift.tt/2rSccd8" id="fullscreen" />
<div id="root"></div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire