React Highchart Jest testing error： `InvalidCharacterError`

Question

react-highchartsを使用するReactコンポーネントの基本的な煙のテストを実行しようとしているときに問題が発生しています。この子コンポーネントとして<ReactHighcharts />のレンダリングに固有の問題であると思われる、いくつかのinterwebsのsleuthingから

it('renders without crashing',() => { 
    const div = document.createElement('div'); 
    render(<MyComponent {...props} />, div); 
}); 

—> 
InvalidCharacterError 

    at exports.name (node_modules/jest-environmentjsdom/node_modules/jsdom/lib/jsdom/living/helpers/validate-names.js:10:11) 
    at a.createElement (node_modules/highcharts/highcharts.js:17:221) 
    at Object.a.svg.z.init (node_modules/highcharts/highcharts.js:92:155) 
    at Object.z.createElement (node_modules/highcharts/highcharts.js:63:3) 
    at Object.a.svg.z.createElement (node_modules/highcharts/highcharts.js:107:525) 
    at Object.a.svg.z.init (node_modules/highcharts/highcharts.js:101:44) 
    at Object.a.svg.a.VMLRenderer.B (node_modules/highcharts/highcharts.js:109:320) 
    at Object.N.getContainer (node_modules/highcharts/highcharts.js:252:329) 

：基本的な冗談で私の典型的な方法は、エラーを生成します。コンポーネントを再構築したり、テストを複雑にすることなく、この問題を回避するにはどうすればよいですか？

Answer 1

問題が子コンポーネントとしてレンダリングされており、親コンポーネントが吹き飛ばされないようにしようとしているので、Enzymeのshallowメソッドを使用して、子なしで親コンポーネントのみレンダリングできます。

it('renders without crashing',() => { 
    expect(shallow(<MyComponent {...props} />).exists()).toBeTruthy(); 
});