React-leaflet测试报错：传入Mock JSON给GeoJson时'_leaflet_id'为null

错误根源 #

这个报错本质是代码尝试在null值上用in操作符查找_leaflet_id，常见触发场景：

• GeoJson组件的data属性传入了null或格式无效的模拟数据
• 集群组件（如react-leaflet-markercluster）在Leaflet地图实例未完全挂载时，就尝试访问内部元素
• 测试环境未正确模拟Leaflet的DOM或上下文依赖

具体修复方案 #

1. 确保模拟GeoJson数据合法 #

先检查你的测试数据是否符合标准GeoJSON结构，绝对避免传入null或不完整数据。示例合法模拟数据：

const mockValidGeoJson = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: { name: "Test Marker 1" },
      geometry: { type: "Point", coordinates: [116.397, 39.908] }
    },
    {
      type: "Feature",
      properties: { name: "Test Marker 2" },
      geometry: { type: "Point", coordinates: [116.407, 39.918] }
    }
  ]
};

测试时确保GeoJson组件的data属性绑定的是这类合法数据，而非null。

2. 等待地图完全挂载后再执行断言 #

测试中必须确保react-leaflet的地图实例初始化完成，避免在组件未挂载时触发集群渲染逻辑。使用waitFor或findBy*查询方法等待元素加载：

import { render, screen, waitFor } from '@testing-library/react';
import YourCustomMap from './YourCustomMap';

test('renders clustered markers successfully', async () => {
  render(<YourCustomMap geoData={mockValidGeoJson} />);
  
  // 等待集群元素出现，确认地图与GeoJson已完成初始化
  await waitFor(() => {
    expect(screen.getByTestId('marker-cluster-group')).toBeInTheDocument();
  });
});

3. 模拟Leaflet核心依赖（针对jsdom环境） #

如果测试环境是jsdom（缺少真实浏览器的Leaflet DOM支持），需要手动模拟Leaflet的核心对象，避免真实DOM操作报错：

jest.mock('leaflet', () => ({
  map: jest.fn(() => ({
    setView: jest.fn(),
    addLayer: jest.fn(),
  })),
  GeoJSON: jest.fn(() => ({
    addTo: jest.fn(),
    addData: jest.fn(),
  })),
  MarkerClusterGroup: jest.fn(() => ({
    addLayer: jest.fn(),
    addTo: jest.fn(),
  }))
}));

注：根据你使用的集群库（如react-leaflet-markercluster），需对应调整模拟的方法。

4. 组件内添加数据兜底逻辑 #

在自定义Map组件中，给GeoJson的data属性设置兜底值，避免传入null或未定义数据：

const YourCustomMap = ({ geoData }) => {
  // 若传入数据为空，使用空的FeatureCollection兜底
  const safeGeoData = geoData || { type: "FeatureCollection", features: [] };

  return (
    <MapContainer center={[39.908, 116.397]} zoom={13}>
      <MarkerClusterGroup data-testid="marker-cluster-group">
        <GeoJson data={safeGeoData} />
      </MarkerClusterGroup>
    </MapContainer>
  );
};

这种方式能从根源避免因数据未初始化导致的null传入问题。

验证测试 #

完成上述调整后重新运行测试，确认报错消失，同时可添加断言验证集群元素是否正确渲染。

内容的提问来源于stack exchange，提问作者viju_jjp