Reactjs 如何使用酶测试react传单自定义子组件中的map参考？

我通过扩展MapControl在react传单中创建了一个自定义组件。该组件不返回任何内容，而是通过道具向它所引用的

map

对象添加一些内容

自定义子组件

import { MapControl, withLeaflet } from "react-leaflet";
import * as L from "leaflet";

class Dashboard extends MapControl<any, any> {
  public createLeafletElement(props: any) {}

  public addDashboard() {
    const dashboard = L.control({ position: "topright" });

    dashboard.onAdd = function() {
      this._div = L.DomUtil.create("div", "dashboard");
      this._div.setAttribute("data-test", "component-dashboard");
      return this._div;
    };

    const { map } = this.props.leaflet;
    dashboard.addTo(map);
  }

  componentDidMount() {
    this.addDashboard();
  }

  render() {
    return null;
  }
}


export default withLeaflet(Dashboard);

从“反应传单”中导入{MapControl，withspool}；
从“传单”中导入*作为L；
类Dashboard扩展了MapControl{
公共元素（props:any）{}
公共addDashboard（）{
const dashboard=L.control（{position:“topright”}）；
dashboard.onAdd=函数（）{
这个.u div=L.DomUtil.create（“div”，“dashboard”）；
此.u部分setAttribute（“数据测试”、“组件仪表板”）；
把这个还给我；
};
const{map}=this.props.传单；
dashboard.addTo（地图）；
}
componentDidMount（）{
this.addDashboard（）；
}
render（）{
返回null；
}
}
使用传单导出默认值（仪表板）；

父/映射组件

import React from "react";
import { Map, TileLayer } from "react-leaflet";
import Dashboard from "./Dashboard";

class MapContainer extends React.Component<any> {
  public constructor(props: any) {
    super(props);
  }

  render() {
    return (
      <div data-test="component-map">
        <Map
          center={this.props.center}
          zoomSnap={this.props.zoomSnap}
          zoom={this.props.zoom}
          style={this.props.style}
        >
          <TileLayer
            url={this.props.url}
            attribution={this.props.attribution}
          />
          <Dashboard />
        </Map>
      </div>
    );
  }
}


export default MapContainer;

从“React”导入React；
从“反应传单”导入{Map，TileLayer}；
从“/Dashboard”导入仪表板；
类MapContainer扩展了React.Component{
公共构造函数（道具：任意）{
超级（道具）；
}
render（）{
返回(
);
}
}
导出默认映射容器；

测试子组件仪表板时，如何初始化映射？ （然后检查它是否包含仪表板） 我正在使用Jest和Ezyme，因为下面的示例演示了如何：

• 创建

  react传单
  Map
  组件的实例

• 确保实例化了自定义控件（

  仪表板

  ）

示例

import React from "react";
import ReactDOM from "react-dom";
import { renderIntoDocument } from "react-dom/test-utils";
import { Map, TileLayer } from "react-leaflet";
import Dashboard from "./Dashboard";


it("Control test", () => {
  class TestComponent extends React.Component {
    constructor() {
      super();
      this.controlRef = React.createRef();
    }

    getControl() {
      return this.controlRef.current.leafletElement;
    }

    render() {
      return (
        <Map center={[0,0]} zoom={10}>
          <Dashboard ref={this.controlRef} />
        </Map>
      );
    }
  }

  const component = renderIntoDocument(<TestComponent />);
  const control = component.getControl();

  expect(control).not.toBeNull();
});

从“React”导入React；
从“react dom”导入react dom；
从“react dom/test utils”导入{renderIntoDocument}；
从“反应传单”导入{Map，TileLayer}；
从“/Dashboard”导入仪表板；
它（“控制测试”，（）=>{
类TestComponent扩展了React.Component{
构造函数（）{
超级（）；
this.controlRef=React.createRef（）；
}
getControl（）{
返回此.controlRef.current.Element；
}
render（）{
返回(
);
}
}
const component=renderIntoDocument（）；
const control=component.getControl（）；
expect（control.not.toBeNull（）；
});