React Highcharts Jest 测试错误：`InvalidCharacterError`

Question

我在尝试对使用 react-highcharts 的 React 组件进行一些基本的冒烟测试时遇到了问题。我使用基本 Jest 的典型方法会产生错误：

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)

从一些互联网调查来看，这似乎是将<ReactHighcharts /> 渲染为子组件的固有问题。如何在不重组组件或使测试复杂化的情况下解决此问题？

Answer 1

由于问题是将 <ReactHighcharts /> 渲染为子组件，而我们只是试图确保父组件不会爆炸，我们可以使用 Enzyme 的 shallow 方法仅渲染该父组件而无需孩子们：

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