Question

我正在尝试测试我使用酶安装方法构建的高图。尝试使用浅渲染测试它时它工作正常，但我想渲染整个组件。这是一个包含问题的回购：https://github.com/hyalkaf/react-highCharts-enzyme-issue，在运行npm run test-mocha之后运行损坏的测试do：npm i。以下是重现问题的代码片段：

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;

最后这里是堆栈跟踪：

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)

库的版本：

npm： 3.10.7 ，
节点： 6.9.5 ，
反应： 15.4.2 ，
酶： 2.7.1 ，
jsdom： 9.11.0 ，
摩卡： 3.2.0

Answer 1

似乎是HighCharts模块中的一个问题。乍一看，它看起来像jsdom不喜欢正在创建的元素。

如果您将>>> df.groupby('Employer').Account_Num.nunique() Employer AAA 2 BBB 2 CCC 1 Name: Account_Num, dtype: int64放在console.log("NAME: " + name);的第10行，如下所示，然后重新运行测试......

node_modules/jsdom/lib/jsdom/living/helpers/validate-names.js

这是输出：

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

最后一行（... 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"/>）是它破坏的地方。也许这是一个错误。很难说，但是在你的测试中使用酶<div>（而不是render）会实现你的目标吗？

mount

使用mount酶渲染react-highcharts会产生InvalidCharacterError

1 个答案: