jestjs - 修复 react 传单测试错误 : Cannot read property '_layerAdd' of null

Question

我在使用 create-react-app 和 Polyline 的基本渲染测试时遇到了一些问题。来自 react 传单的组件。每当我尝试添加 Polyline小时候给我的Map ，我收到测试错误消息:TypeError: Cannot read property '_layerAdd' of null . map 和折线在浏览器中仍然显示得很好，但是这个测试错误有点烦人。

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

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

这是我的 map 渲染:

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(特别是 createSVGRect is not supported )。这基本上就是发生指定错误的原因。

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

它需要被视为一种解决方法，但其想法是扩展 JSDOM SVGSVGElement通过介绍createSVGRect作为一个空函数。该技术将允许在 JSDOM 中模拟 SVG 支持，以便通过矢量覆盖(如 Polygon)的 Jest 测试

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