React 单元测试传单

Question

我在单元测试 Map 组件时遇到问题。

我的班级组件：

componentDidMount() {
    const { zoom, data, center } = this.props;
    const { activeButton } = this.state;
    if (data[activeButton] != null) {
      this.map = map('map', {
        center: data[activeButton].points ? data[activeButton].points[0] : center,
        zoom,
        layers: [tileLayer(...SETTINGS.mapTileLayer)],
      });
      if (data[activeButton].points != null) {
        this.addPolyline(data[activeButton].points);
      }
    }
  }

  addPolyline = (points: Points) => {
    if (this.polyline != null) {
      this.map.removeLayer(this.polyline);
      this.map.removeLayer(this.marker.start);
      this.map.removeLayer(this.marker.stop);
    }

    if (points != null && points[0] != null) {
      this.polyline = new Polyline(points, SETTINGS.polyline);

      this.marker.start = new Marker(points[0]);
      this.marker.stop = new Marker(points[points.length - 1]);

      this.polyline.addTo(this.map);
      this.marker.start.addTo(this.map);
      this.marker.stop.addTo(this.map);

      this.map.panTo(points[0]);
    }
  };

使用 Jest 和 Enzyme 进行单元测试

function getComponent(mockData) {
  return <Map data={mockData} />;
}

const mockData = [
  { id: 0, name: '1', distance: '1', points: [[0, 0], [1, 1]] },
  { id: 1, name: '2', distance: '2', points: [[0, 0], [1, 1]] },
];

describe('LastActivity component', () => {  
  it('button click', () => {
    const wrapper = mount(getComponent(mockData), { attachTo: document.body });

...etc...
});

通过这个测试我得到了

TypeError: 无法读取 null 的属性“_layerAdd”

this.polyline.addTo(this.map);

当我注释掉这一行时

this.polyline.addTo(this.map);

一切正常，测试通过

package.json:

"enzyme-adapter-react-16": "1.2.0",
"enzyme": "3.4.4",
"react": "16.4.2",
"react-dom": "16.4.2",
"leaflet": "1.3.4",
"jest": "23.5.0",
"jest-cli": "23.5.0",

Answer 1

我在 Leaflet 的 github 上看到了一堆相关的问题。维护者似乎有一些反对框架的东西。 查看https://react-leaflet.js.org/，它应该可以更好地与 react 配合使用。