rendering react-highcharts with mount enzyme gives an InvalidCharacterError

Question

I'm trying to test a highchart I built using enzyme mount method. It works fine when trying to test it with shallow rendering but I want to render the whole component. Here is a repo with the problem: https://github.com/hyalkaf/react-highCharts-enzyme-issue, to run the broken test do: npm run test-mocha after of course forking and running npm i. Here are snippets of code to reproduce the problem:

App.js

import React, { Component } from 'react';
global.HighCharts = require('highcharts');
require('highcharts/modules/exporting')(global.HighCharts);
require('highcharts-offline-exporting')(global.HighCharts);
const ReactHighCharts = require('react-highcharts');

const config = {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
      text: 'Browser market shares January, 2015 to May, 2015'
  },
  tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
      }
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33
    }, {
        name: 'Chrome',
        y: 24.03,
        sliced: true,
        selected: true
    }, {
        name: 'Firefox',
        y: 10.38
    }, {
        name: 'Safari',
        y: 4.77
    }, {
        name: 'Opera',
        y: 0.91
    }, {
        name: 'Proprietary or Undetectable',
        y: 0.2
    }]
  }]
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
          <ReactHighCharts config={config} />
        </div>
      </div>
    );
  }
}

export default App;

App.test.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { mount, shallow } from 'enzyme';

it('fails when trying to mount react highcharts', () => {
  const wrapper = mount(<App />);
});

setup.js:

var jsdom = require('jsdom').jsdom;

global.document = jsdom('<!doctype html><html><body></body></html>');
global.window = document.defaultView;
global.navigator = global.window.navigator;
window.sessionStorage = {
  getItem(key) {
    return this[key];
  },
  setItem(key, value) {
    this[key] = value;
  },
  removeItem(key) {
    this[key] = undefined;
  },
};
window.localStorage = window.sessionStorage;

and finally here is the stack trace:

InvalidCharacterError
  at exports.name (node_modules\jsdom\lib\jsdom\living\helpers\validate-names.js:10:11)
  at DocumentImpl.createElement (node_modules\jsdom\lib\jsdom\living\nodes\Document-impl.js:685:5)
  at Document.createElement (node_modules\jsdom\lib\jsdom\living\generated\Document.js:92:59)
  at a.createElement (node_modules\highcharts\highcharts.js:17:221)
  at Object.init (node_modules\highcharts\highcharts.js:91:494)
  at Object.createElement (node_modules\highcharts\highcharts.js:62:286)
  at Object.createElement (node_modules\highcharts\highcharts.js:107:323)
  at Object.init (node_modules\highcharts\highcharts.js:100:377)
  at Object.B (node_modules\highcharts\highcharts.js:109:141)
  at Object.getContainer (node_modules\highcharts\highcharts.js:249:378)
  at Object.firstRender (node_modules\highcharts\highcharts.js:263:422)
  at Object.init (node_modules\highcharts\highcharts.js:240:174)
  at Object.getArgs (node_modules\highcharts\highcharts.js:239:189)
  at Object.a.Chart (node_modules\highcharts\highcharts.js:238:501)
  at renderChart (node_modules\react-highcharts\dist\ReactHighcharts.js:1:1283)
  at componentDidMount (node_modules\react-highcharts\dist\ReactHighcharts.js:1:1804)
  at node_modules\react-dom\lib\ReactCompositeComponent.js:265:25
  at measureLifeCyclePerf (node_modules\react-dom\lib\ReactCompositeComponent.js:75:12)
  at node_modules\react-dom\lib\ReactCompositeComponent.js:264:11
  at CallbackQueue.notifyAll (node_modules\react-dom\lib\CallbackQueue.js:76:22)
  at ReactReconcileTransaction.close (node_modules\react-dom\lib\ReactReconcileTransaction.js:80:26)
  at ReactReconcileTransaction.closeAll (node_modules\react-dom\lib\Transaction.js:206:25)
  at ReactReconcileTransaction.perform (node_modules\react-dom\lib\Transaction.js:153:16)
  at batchedMountComponentIntoNode (node_modules\react-dom\lib\ReactMount.js:126:15)
  at ReactDefaultBatchingStrategyTransaction.perform (node_modules\react-dom\lib\Transaction.js:140:20)
  at Object.batchedUpdates (node_modules\react-dom\lib\ReactDefaultBatchingStrategy.js:62:26)
  at Object.batchedUpdates (node_modules\react-dom\lib\ReactUpdates.js:97:27)
  at Object._renderNewRootComponent (node_modules\react-dom\lib\ReactMount.js:320:18)
  at Object._renderSubtreeIntoContainer (node_modules\react-dom\lib\ReactMount.js:401:32)
  at Object.render (node_modules\react-dom\lib\ReactMount.js:422:23)
  at Object.renderIntoDocument (node_modules\react-dom\lib\ReactTestUtils.js:79:21)
  at renderWithOptions (node_modules\enzyme\build\react-compat.js:187:26)
  at new ReactWrapper (node_modules\enzyme\build\ReactWrapper.js:94:59)
  at mount (node_modules\enzyme\build\mount.js:19:10)
  at Context.<anonymous> (C:/Users/phil/Downloads/projects with problems/react-highcharts-enzyme-issue/src/App.test.js:7:19)

versions of libraries:

npm: 3.10.7,
node: 6.9.5,
react: 15.4.2,
enzyme: 2.7.1,
jsdom: 9.11.0,
mocha: 3.2.0

grizzthedj grizzthedj · Accepted Answer · 2017-03-04T01:26:10

Seems like an issue in the HighCharts module. At a glance, it looks like jsdom doesn't like an element that is being created.

If you put console.log("NAME: " + name); at line 10 in node_modules/jsdom/lib/jsdom/living/helpers/validate-names.js like below, and then rerun the test ...

exports.name = function (name) {
  const result = xnv.name(name);
  console.log("NAME: " + name);
  if (!result.success) {
    throw new DOMException(DOMException.INVALID_CHARACTER_ERR,
      "\"" + name + "\" did not match the Name production: " + result.error);
  }
};

This is the output:

... 
NAME: style
NAME: style
NAME: style
NAME: <div filled="f" stroked="f" style="position: absolute;left:0;top:0;width:1px;height:1px;visibility: hidden"/>

The last line(the <div>) is where it breaks. Perhaps this is a bug. Hard to say, but will using enzyme's render(instead of mount) in your test accomplish your goal?

// App.test.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { render, mount, shallow } from 'enzyme';

it('fails when trying to mount react highcharts', () => {
  const wrapper = render(<App />);
});

rendering react-highcharts with mount enzyme gives an InvalidCharacterError

1 Answers