rendering react-highcharts mit Mount-Enzym gibt einen InvalidCharacterError

Ich versuche, ein Highchart zu testen, das ich mit Enzym-Mount-Methode gebaut. Es funktioniert gut, wenn Sie versuchen, es mit seichtem Rendering zu testen, aber ich möchte die gesamte Komponente rendern. Hier ist ein Repo mit dem Problem: https://github.com/hyalkaf/react-highCharts-enzyme-issue, um den kaputten Test zu tun: npm run test-mocha nach dem natürlich Forken und Laufen npm i. Hier sind Code-Schnipsel, um das Problem zu reproduzieren:rendering react-highcharts mit Mount-Enzym gibt einen InvalidCharacterError

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;

und schließlich Hier ist die Stapelspur:

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)

Versionen von Bibliotheken:

NPM: 3.10.7,
Knoten: 6.9.5,
reagieren: 15.4.2,
Enzym: 2.7.1,
jsdom: 9.11.0,
mokka: 3.2.0

Quelle

2017-03-03 Kafo

Haben Sie dieses Problem jemals behoben? –

Scheint wie ein Problem im HighCharts-Modul. Auf einen Blick sieht es so aus, als ob jsdom ein erstelltes Element nicht mag.

Wenn Sie console.log("NAME: " + name); in Zeile 10 in node_modules/jsdom/lib/jsdom/living/helpers/validate-names.js wie unten setzen und dann den Test erneut durchführen ...

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

Dies ist die Ausgabe:

... 
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"/>

Die letzte Zeile (die <div>) ist wo es bricht. Vielleicht ist das ein Fehler. Schwer zu sagen, aber mit enzym render (statt mount) in ihrem test erreichen sie ihr ziel?

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

Quelle

2017-03-04 01:26:10 grizzthedj

Ich werde das versuchen. Danke – Kafo

es wirft den gleichen Fehler mit render. – Kafo

@Kafo hast du das jemals gelöst? – CDeutsch

rendering react-highcharts mit Mount-Enzym gibt einen InvalidCharacterError

Antwort

Verwandte Themen