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(); 
});