使用Jest/Enzyme测试react-map-gl/deck.gl组件时遇state为null错误

嘿，我之前也踩过类似地图组件测试的坑，这个错误大多和测试环境缺少浏览器API支持，或者第三方地图库的内部状态处理有关，给你几个可行的解决方案：

先贴出你的测试代码（方便参考） #

describe('MapGL test', () => {
  it('renders without crashing', () => {
    const wrapper = mount(
      <MapGL 
        gpsPath={mockGpsPath} 
        pathColor={mockPathColor} 
        pathWidth={mockPathWidth} 
        bearing={mockBearing} 
      />,
    )
  })
})

解决方案1：模拟测试环境缺失的浏览器API #

ReactMapGL和DeckGL依赖很多浏览器端的API（比如ResizeObserver、mapboxgl对象），而Jest是无头测试环境，默认没有这些，所以需要手动模拟：

在你的测试文件顶部添加这段代码：

beforeAll(() => {
  // 模拟ResizeObserver，很多地图组件会用到它做尺寸监听
  global.ResizeObserver = class ResizeObserver {
    observe() {}
    unobserve() {}
    disconnect() {}
  };

  // 模拟mapboxgl核心对象，避免初始化时触发真实地图逻辑报错
  global.mapboxgl = {
    Map: jest.fn(() => ({
      on: jest.fn(),
      off: jest.fn(),
      remove: jest.fn(),
      getCenter: jest.fn(() => ({ lng: 0, lat: 0 })),
      getZoom: jest.fn(() => 10),
    })),
    Marker: jest.fn(),
    Popup: jest.fn(),
  };
});

解决方案2：用shallow渲染替代mount #

如果你的测试只是想验证组件能正常渲染，不需要完整的DOM树和子组件的生命周期，用shallow会更轻量，也能避开很多第三方库的初始化问题：

import { shallow } from 'enzyme';

describe('MapGL test', () => {
  it('renders without crashing', () => {
    const wrapper = shallow(
      <MapGL 
        gpsPath={mockGpsPath} 
        pathColor={mockPathColor} 
        pathWidth={mockPathWidth} 
        bearing={mockBearing} 
      />
    );
    // 简单验证组件存在即可
    expect(wrapper.exists()).toBe(true);
  });
});

解决方案3：直接Mock掉第三方地图组件 #

如果你的测试重点是父组件的逻辑，而不是地图组件的渲染细节，可以直接把ReactMapGL和DeckGL mock成简单的占位组件：

// Mock react-map-gl组件
jest.mock('react-map-gl', () => ({
  default: jest.fn(() => <div data-testid="react-map-gl" />),
}));

// Mock deck.gl的DeckGL组件
jest.mock('deck.gl', () => ({
  DeckGL: jest.fn(() => <div data-testid="deck-gl" />),
}));

describe('MapGL test', () => {
  it('renders without crashing and passes props correctly', () => {
    const wrapper = mount(
      <MapGL 
        gpsPath={mockGpsPath} 
        pathColor={mockPathColor} 
        pathWidth={mockPathWidth} 
        bearing={mockBearing} 
      />
    );
    
    // 验证地图组件被渲染
    expect(wrapper.find('[data-testid="react-map-gl"]')).toHaveLength(1);
    // 还可以验证props是否正确传递给了地图组件
    expect(require('react-map-gl').default).toHaveBeenCalledWith(
      expect.objectContaining({
        bearing: mockBearing
      }),
      expect.anything()
    );
  });
});

额外排查点：检查组件内部的清理逻辑 #

如果上面的方法都没用，可能是你的MapGL组件在卸载时（比如测试结束后）访问了已经被置为null的state。比如类组件的componentWillUnmount里有没有错误的引用，或者函数组件的useEffect清理函数里有没有访问已经销毁的状态，这时候需要检查组件内部的生命周期/副作用处理代码。

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