时间戳

首页 > 解决方案 > 使用笑话和酶对传单进行单元测试时未定义的 layerGroup()

reactjs - 使用笑话和酶对传单进行单元测试时未定义的 layerGroup()

问题描述

我正在尝试测试我MyCustomMap是否正在调用我MapController并创建一个新的传单地图组件。

但是MapController设置_mapGroup为组件undefined，MyCustomMap它应该是L.layerGroup()（不是undefined）。

我已经尝试过以不同的方式进行模拟，但MapController仍然是. 怎么了？我该如何解决这个问题？leaflet_mapGroupundefined

我的 MyCustomMap 测试文件（custom-map.test.js）：

import MyCustomMap from './custom-map';
import initialMapOptions from './map-options';
import MapController from './map-controller';

const mapCreateGroupMock = jest.fn(),
  mapAddGroupToMap = jest.fn();

let myMap = null,
  mapController = null;

beforeAll(() => {
  const mapOptions = initialMapOptions();
  mapController = {
    createGroup: mapCreateGroupMock,
    addGroupToMap: mapAddGroupToMap
  };
  myMap = new MyCustomMap(mapController, mapOptions);
});

describe('My custom map', () => {
  it(`should call MapController and create a new leaflet map component`, () => {
    expect(mapCreateGroupMock).toBeCalledTimes(1);
    expect(mapAddGroupToMap).toBeCalledTimes(1);    
    expect(myMap._mapGroup).not.toBeNull();     // -> here is failing because myMap._mapGroup is undefined and shouldn't be
  });
});

我的地图控制器（map-controller.js）：

import L from 'leaflet';

class MapController {
  constructor(container, configuration) {
    this._map = new L.Map(container, { zoomControl: false, minZoom: this._minZoom });
    this._container = document.getElementById(container);

    //more code here ...
  }

  createGroup() {
    return L.layerGroup();
  }


  addGroupToMap(group) {
    this._map.addLayer(group);
  }

  //more code here ...
}

export default MapController;

我的 MyCustomMap 组件（custom-map.js）：

class MyCustomMap {
  constructor(mapController, configuration) {
    this._mapController = mapController;
    this._configuration = configuration;

    this._mapGroup = this._mapController.createGroup();
    this._mapController.addGroupToMap(this._mapGroup);

    //more code here ...
  }
}

标签： reactjsunit-testingmockingjestjsleaflet

解决方案

解决了！我mapCreateGroupMock只是返回一个空函数，我需要模拟一个返回值。所以我：

  • 嘲笑那个价值；
  • mockClear()对我的模拟函数执行 a ；
  • 做了每一个步骤beforeEach()；
  • 并将我的myMap._mapGroup断言更改.toBeTruthy()为检查是否未定义且不为空。

现在它按预期工作。

MyCustomMap 测试文件 (custom-map.test.js) 的最终更改：

import MyCustomMap from './custom-map';
import initialMapOptions from './map-options';

const mapCreateGroupMock = jest.fn(),
  mapAddGroupToMap = jest.fn(),
  mapOptions = initialMapOptions();  

let myMap = null,
  mapController = null;

describe('My custom map', () => {
  beforeEach(() => {
    mapCreateGroupMock.mockClear();
    mapAddGroupToMap.mockClear();

    const addLayerMock = jest.fn(),
      mapGroup = {
        addLayer: addLayerMock
      };
    mapCreateGroupMock.mockReturnValueOnce(mapGroup);

    mapController = {
      createGroup: mapCreateGroupMock,
      addGroupToMap: mapAddGroupToMap
    };
    myMap = new MyCustomMap(mapController, mapOptions);
  });

  it(`should call MapController and create a new leaflet map component`, () => {
    expect(mapCreateGroupMock).toBeCalledTimes(1);
    expect(mapAddGroupToMap).toBeCalledTimes(1);
    expect(myMap._mapGroup).toBeTruthy();
  });
});

推荐阅读