修复反应传单测试错误：无法读取 null 的属性“_layerAdd”

Question

我在 create-react-app 的基本渲染测试和Polylinereact-leaflet的组件方面遇到了一些问题。每当我尝试添加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图书馆无关。LeafletPolyline使用SVG渲染器（默认情况下），但Jest测试运行器附带的用于 Create React App 的JSDOM不完全支持 SVG（特别是不支持）。这基本上就是发生指定错误的原因。createSVGRect

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

它需要被视为一种解决方法，但其想法是SVGSVGElement通过引入createSVGRect作为空函数来扩展 JSDOM 。该技术将允许在 JSDOM 中模拟 SVG 支持，以便通过对矢量叠加的Jest 测试，例如 Polygon

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

var createElementNSOrig = global.document.createElementNS
global.document.createElementNS = function(namespaceURI, qualifiedName) {
  if (namespaceURI==='http://www.w3.org/2000/svg' && qualifiedName==='svg'){
    var element = createElementNSOrig.apply(this,arguments)
    element.createSVGRect = function(){}; 
    return element;
  }
  return createElementNSOrig.apply(this,arguments)
}