2017-10-12 17 views
0

私はマウントを使用して私のアプリ全体で酵素検査を行っています。すべての子コンポーネントをテストしたいので、これが最善の方法だと思います。私はまた、他のテストで個々のコンポーネントをテストします。実際にエラーがそうであるものを言っていません酵素がハイチャートに反応しないのはなぜですか?

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import { BrowserRouter } from 'react-router-dom'; 
import { Provider } from 'react-redux'; 
import Store from '../../store'; 
import { shallow, mount } from 'enzyme'; 

const StoreInstance = Store(); 

it('renders without crashing',() => { 
    const div = document.createElement('div'); 

    mount(
    <Provider store={StoreInstance}> 
      <BrowserRouter> 
      <App /> 
      </BrowserRouter> 
     </Provider> 
    ); 
}); 

と私は私のテストを実行すると、私は次のようなエラー

console.error node_modules/react-dom/cjs/react-dom.development.js:8305 
     The above error occurred in the <HighchartsChart> component: 
      in HighchartsChart (at Graph.js:42) 
      in div (at Graph.js:41) 
      in div (at Graph.js:37) 
      in Graph (at Dashboard.js:39) 
      in div (at Card.js:24) 
      in div (at Card.js:10) 
      in Card (at Dashboard.js:38) 
      in div (at Dashboard.js:20) 
      in Dashboard (created by Route) 
      in Route (at App.js:59) 
      in Switch (at App.js:58) 
      in main (at App.js:57) 
      in div (at App.js:54) 
      in App (created by Connect(App)) 
      in Connect(App) (created by Route) 
      in Route (created by withRouter(Connect(App))) 
      in withRouter(Connect(App)) (at App.test.js:17) 
      in Router (created by BrowserRouter) 
      in BrowserRouter (at App.test.js:16) 
      in Provider (created by WrapperComponent) 
      in WrapperComponent 

     Consider adding an error boundary to your tree to customize error handling behavior. 
     You can learn more about error boundaries at react docs (fb.me/react-error-boundaries). 

を取得し、次のよう

私app.test.jsです私はデバッグに苦労しています。

私はそれは私が私のgraph.jsに使用しています<ReactHighcharts />コンポーネント文句を言っていることを知っていますか:

class Graph extends Component { 

    render() { 

    return (
     <div className="graph-container"> 

      <div className="graph"> 
       <ReactHighcharts config={this.props.config ? this.props.config : config} /> // config var is defined but I haven't included it 
      </div> 

     </div> 
    ); 
    } 
} 

export default Graph; 

はどのような援助をお願い申し上げます。

おかげ

編集:私は提案どおりにエラー境界要素を追加した、今(/ node_modules/jsdom/libにexports.nameでフォローエラー

InvalidCharacterError を取得しています

/jsdom/living/helpers/validate-names.js:10:11) 、DocumentImpl.createElement(/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:686:5) (Documentで)。 createElement(/node_modules/jsdom/lib/jsdom/living/generated/Document.js:92:5 9)a.createElementで (/node_modules/highcharts/highcharts.js:18:45)INITで (/node_modules/highcharts/highcharts.js:95:411)Object.createElementで (/ node_modules/highcharts/highcharts .js:65:261) Object.createElement(/node_modules/highcharts/highcharts.js:111:222) at Object.init(/node_modules/highcharts/highcharts.js:104:305) at Object.C (Graphic.js:45での)\ n(Graphic.js:45)のgetContainer(/node_modules/highcharts/highcharts.js:113:48)の {componentStack: '\ n HighchartsChartの\ n (Graph.js:39)\ nグラフ内(Dashboard.js:39)\ n divの(Graph.js:39の)\ nのdivの(Graph.js:43の)\ nのErrorBoundary(Graph.js:44) (Dashboard.js:20)\ n Dashboard(Dashboard.js:38)\ n内のdiv(Card.js:10) (App.js:58)\ nメイン(App.js:57)\ n div(App.js:59)で\ nスイッチの\ n(ルートで作成)\ n \ n(Connect(App))で作成された\ n(Connect(App)で作成された) ))(App.test.js:16)\ n(WrapperComponentによって作成された)プロバイダの\ n WrapperComponent内の\ n BrowserRouter内の\ n

答えて

関連する問題