小编cor*_*eyl的帖子

在尝试设置测试环境时，我遇到了以下问题。当我运行测试（使用mocha ./src/test/.setup.js ./src/test/**.test.js）时，出现Element is not defined错误：

app\node_modules\onsenui\js\onsenui.js:603
  var originalCreateShadowRoot = Element.prototype.createShadowRoot;
                                 ^

ReferenceError: Element is not defined
    at app\node_modules\onsenui\js\onsenui.js:603:34
    at app\node_modules\onsenui\js\onsenui.js:359:7
    at Array.forEach (native)
    at initializeModules (app\node_modules\onsenui\js\onsenui.js:358:13)
    at app\node_modules\onsenui\js\onsenui.js:908:5
    (...)

这怎么可能，Element不是一个基本的DOM元素吗？

使用以下版本：

• 酶@2.4.1
• 摩卡@3.0.2
• onsenui@2.0.0-rc.17
• 反应@15.3.1
• 反应-onsenui@0.7.5

使用以下 .setup.js 文件：

require('babel-register')({
    presets: ["react","airbnb","es2015"]
});

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

var exposedProperties = ['window', 'navigator', 'document'];

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
    if (typeof global[property] === 'undefined') {
        exposedProperties.push(property);
        global[property] = document.defaultView[property];
    }
});

global.navigator …

如何获取标记集合的边界，以便这些边界可用于在react-leaflet地图上显示所有标记？这是我的渲染功能：

render() {
    const position = [51.505, 4.12];

    return (
        <Map center={position} zoom={3} style={{width: '100%', height: '600px'}} >
            <TileLayer
                attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
            />
            {this.state.markers || null}
        </Map>
    );
}

标记添加到this.state.markers：

this.state.markers.push(
    <Marker position={position}>
        <Popup>
            <span>Hello</span>
        </Popup>
    </Marker>
);
this.setState({markers: this.state.markers});

标记正在显示，但我希望调整地图的边界和中心，以便标记在具有一定填充量的地图视口内很好地适应。

关于如何做到这一点的任何想法？

编辑：这是我的导入语句：import {Map, Marker, Popup, TileLayer} from 'react-leaflet';