0

I'm running into an issue while trying to do some basic smoke testing for React components that use react-highcharts. My typical method with basic Jest yields an error:

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)

From some interwebs sleuthing, it seems that this is an inherent problem with rendering <ReactHighcharts /> as a child component. How can I get around this without restructuring my component or complicating my testing?

dangerismycat
  • 824
  • 2
  • 11
  • 18
  • why dont you use reactTestUtils here? `const myComponent = ReactTestUtils.renderIntoDocument();` this way you have a reference of the component. aka.. `myComponent.state` would be the state of that component – John Ruddell Apr 06 '17 at 20:58

1 Answers1

1

Since the problem is rendering <ReactHighcharts /> as a child component, and we're just trying to make sure the parent component doesn't blow up, we can use Enzyme's shallow method to render only that parent component without the children:

it('renders without crashing', () => {
  expect(shallow(<MyComponent {...props} />).exists()).toBeTruthy();
});
dangerismycat
  • 824
  • 2
  • 11
  • 18
  • 1
    You could also use snapshot testing to make sure that the child components are getting the correct props passed. – Andreas Köberle Apr 07 '17 at 06:29
  • Good idea! In this particular case the only props I'm passing are a config object that I generate in a testable function, so not necessary here. But still a good idea, I'll keep that in mind for other components. – dangerismycat Apr 07 '17 at 18:02