Question

我在create-react-app的基本渲染测试和react-leaflet的Polyline组件方面遇到一些问题。每当我尝试将Polyline作为孩子添加到Map时，都会收到测试错误消息：TypeError: Cannot read property '_layerAdd' of null。地图和折线都仍然可以在浏览器中正常显示，但是此测试错误变得有些烦人。

有人遇到过同样的问题吗？如果是这样，您如何解决？

我已经看到了一些类似的问题，但是使用react-leaflet时还没有真正的答案。我尝试将地图渲染绑定到componentDidMount，但是没有运气。

这是我的地图渲染：

render() {
    return (
      <Map
        animate={this.state.animate}
        center={this.state.latlng}
        length={4}
        onClick={this.handleClick}
        zoom={13}
      >
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png"
        />
        <Marker position={pathPoints[0]} />
        <Marker position={pathPoints[pathPoints.length - 1]} />
        <Polyline color="red" positions={pathPoints} />
      </Map>
    );
  }
}

谢谢！

Answer 1

实际上，它与react-leaflet库无关。传单Polyline使用SVG renderer（默认情况下），但是JSDOM随Jest一起用于Create React App的测试运行程序，不完全支持SVG（尤其是{{ 1}} is not supported）。这基本上就是发生指定错误的原因。

如何配置Create React App通过测试？

它实际上应该被认为是一种解决方法，但是其思想是通过引入createSVGRect作为一个空函数来扩展JSDOM SVGSVGElement。该技术将允许在JSDOM中模拟SVG支持，以便通过矢量叠加（例如Polygon

）的Jest测试

在createSVGRect目录下，创建一个名为src的文件并提供以下代码：

setupTests.js

修复react-leaflet测试错误：无法读取null的属性'_layerAdd'

1 个答案: