反応テストエラーです。ターゲットコンテナはDOM要素ではありません

私の反応アプリの単体テストを書いています。私はエラーを得たしかし反応テストエラーです。ターゲットコンテナはDOM要素ではありません

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

に従うように私が書いた最初のユニットテストがある

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

私はnpm startこれでそれを実行する場合、私は、私が実際に書いたアプリケーションは、そのようなエラーがないことを言わなければなりませんエラーは単体テストで自分のプログラムをテストするときだけです。この問題を解決するにはどうすればいいですか？ここで

ここ

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

をレンダリングするルートのdivのためindex.jsファイルであり、私のhtmlファイルが

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

あるソリューション： 私はこのエラーを解決するための解決策を見つけました。これを修正するには、テストするコンポーネントをルートコンポーネントにラップします。これは、試験例明示的文書にHTMLファイルをロードした場合を除き

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

出典

2017-06-21 Darren

で、冗談はそのルート要素を見つけることができないであろう。単体テストでは、必要以上に何も含まないことが最善です。

あなたはDocumentFragmentのを作成し、このようなテストのためにその上に要素をレンダリングすることができます： `ドキュメント：

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

出典

2017-06-21 20:44:12

ありません私は前に、同じエラー – Darren

あなたはこのように身体にドキュメントを追加する試みることができることを試してみました.body.appendChild（div） 'これは 'ReactDOM.render（）'の前になります –

あなたの助けに感謝します。私はすでにこのエラーを解決した – Darren

反応テストエラーです。ターゲットコンテナはDOM要素ではありません

答えて

関連する問題