如果組件中有componentDidMount，如何進行快照測試？

Question

每個人。 最近我開始學習 React 組件的測試。 我有一個帶有 map 的小組件（傳單）

import React, {PureComponent, createRef} from 'react';
import PropTypes from 'prop-types';

import leaflet from 'leaflet';

class Map extends PureComponent {
  constructor(props) {
    super(props);

    this.mapRef = createRef(); // map element

    this.city = [52.38333, 4.9]; // map center
    this.zoom = 12;

    // set pin icon
    this.icon = leaflet.icon({
      iconUrl: `img/pin.svg`,
      iconSize: [27, 39]
    });
  }

  render() {
    return (
      <div id="map" style={{'height': `100%`}} ref={this.mapRef}></div>
    );
  }

  componentDidMount() { // when everything is rendered on screen
    const mapElement = this.mapRef.current; // find my map element

    const {offersCoords} = this.props; // all coords

    this.map = leaflet.map(mapElement, { // set up map (first parameter is  map element, so I wrapperd it in componentDidMount)
      zoom: this.zoom,
      center: this.city,
      zoomControl: false,
      marker: true
    });

    // set default position
    this.map.setView(this.city, this.zoom);

    // add pretty layer
    leaflet
      .tileLayer(`https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png`, {
        attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>`
      })
      .addTo(this.map);

    // add each place (from props) to map
    offersCoords.forEach((offerCoords) => {
      leaflet
        .marker(offerCoords, {icon: this.icon})
        .addTo(this.map);
    });
  }
}

Map.propTypes = {
  offersCoords: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired, // e.g: [[54.34, 93.432], [32.43, 54.51]]
};

export default Map;

之后我寫了一個簡單的測試

import React from 'react';
import renderer from 'react-test-renderer';

import Map from './map.jsx';

it(`Map correctly renders`, () => {
  const coords = [[50, 32.9234], [34, 32], [42, 23.234]];

  const tree = renderer
    .create(<Map offersCoords={coords} />)
    .toJSON();

  expect(tree).toMatchSnapshot();
});

在npm 測試后，我收到一個巨大的錯誤（12000+ 個符號）

如果我是對的，那么問題出在 componentDidMount 中：

錯誤：未捕獲 [錯誤：未找到 Map 容器。]

這一行告訴我在地圖的初始化中沒有容器。 這意味着 componentDidMount 還沒有完成。 問題：有什么正確的方法可以解決嗎？

Answer 1

每個人。 最近我開始學習 React 組件的測試。 我有一個帶有 map 的小組件（傳單）

import React, {PureComponent, createRef} from 'react';
import PropTypes from 'prop-types';

import leaflet from 'leaflet';

class Map extends PureComponent {
  constructor(props) {
    super(props);

    this.mapRef = createRef(); // map element

    this.city = [52.38333, 4.9]; // map center
    this.zoom = 12;

    // set pin icon
    this.icon = leaflet.icon({
      iconUrl: `img/pin.svg`,
      iconSize: [27, 39]
    });
  }

  render() {
    return (
      <div id="map" style={{'height': `100%`}} ref={this.mapRef}></div>
    );
  }

  componentDidMount() { // when everything is rendered on screen
    const mapElement = this.mapRef.current; // find my map element

    const {offersCoords} = this.props; // all coords

    this.map = leaflet.map(mapElement, { // set up map (first parameter is  map element, so I wrapperd it in componentDidMount)
      zoom: this.zoom,
      center: this.city,
      zoomControl: false,
      marker: true
    });

    // set default position
    this.map.setView(this.city, this.zoom);

    // add pretty layer
    leaflet
      .tileLayer(`https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png`, {
        attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>`
      })
      .addTo(this.map);

    // add each place (from props) to map
    offersCoords.forEach((offerCoords) => {
      leaflet
        .marker(offerCoords, {icon: this.icon})
        .addTo(this.map);
    });
  }
}

Map.propTypes = {
  offersCoords: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired, // e.g: [[54.34, 93.432], [32.43, 54.51]]
};

export default Map;

之后我寫了一個簡單的測試

import React from 'react';
import renderer from 'react-test-renderer';

import Map from './map.jsx';

it(`Map correctly renders`, () => {
  const coords = [[50, 32.9234], [34, 32], [42, 23.234]];

  const tree = renderer
    .create(<Map offersCoords={coords} />)
    .toJSON();

  expect(tree).toMatchSnapshot();
});

在npm 測試后，我收到一個巨大的錯誤（12000+ 個符號）

如果我是對的，那么問題出在 componentDidMount 中：

錯誤：未捕獲 [錯誤：未找到 Map 容器。]

這一行告訴我在地圖的初始化中沒有容器。 這意味着 componentDidMount 還沒有完成。 問題：有什么正確的方法可以解決嗎？