React Highcharts Jest Testfehler: `InvalidCharacterError`

Question

Ich stoße auf ein Problem, während ich versuche, einige grundlegende Rauchtests für React-Komponenten durchzuführen, die react-highcharts verwenden. Meine typische Methode mit grundlegenden Jest ergibt einen Fehler:

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) 

Von einigen sleuthing interwebs, wie es scheint, dass dies ein inhärentes Problem mit <ReactHighcharts /> als Kind Komponente macht. Wie kann ich das umgehen, ohne meine Komponente zu restrukturieren oder meine Tests zu erschweren?

Answer 1

Da das Problem <ReactHighcharts /> als Kind Komponente rendert, und wir versuchen, nur die übergeordnete Komponente sprengen, um sicherzustellen, nicht, können wir ohne die Kinder nur, dass die übergeordnete Komponente Enzym shallow Methode zu machen verwenden:

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