React Highcharts Jest測試錯誤：`InvalidCharacterError`

Question

我在嘗試對使用react-highcharts的React組件進行一些基本的煙霧測試時遇到了問題。我的基本玩笑典型的方法產生一個錯誤：

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) 

從一些interwebs偵探，似乎這是渲染<ReactHighcharts />作爲子組件的固有問題。如何避免重組我的組件或使測試複雜化？

Answer 1

由於問題渲染<ReactHighcharts />作爲子組件，而我們只是想確保父組件不炸燬，我們可以使用酶的shallow方法來呈現只有父組件沒有把孩子：

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