search

bluehalo / ngx-leaflet-markercluster

MIT License
61 stars 24 forks source link

"TypeError: L.markerClusterGroup is not a function" while testing with Jest #75

Open tegola opened 2 years ago

tegola commented 2 years ago

Hello, I have no issues while developing, but I'm having this one while running a component test with Jest:

MapComponent › should create

TypeError: L.markerClusterGroup is not a function

  31 |     fixture = TestBed.createComponent(MapComponent);
  32 |     component = fixture.componentInstance;
> 33 |     fixture.detectChanges();
     |             ^
  34 |   });
  35 |
  36 |   it('should create', () => {

  at LeafletMarkerClusterDirective.ngOnInit (node_modules/@asymmetrik/ngx-leaflet-markercluster/fesm2020/asymmetrik-ngx-leaflet-markercluster.mjs:20:37)
  at callHook (node_modules/@angular/core/fesm2020/core.mjs:2498:22)
  at callHooks (node_modules/@angular/core/fesm2020/core.mjs:2467:17)
  at executeInitAndCheckHooks (node_modules/@angular/core/fesm2020/core.mjs:2418:9)
  at refreshView (node_modules/@angular/core/fesm2020/core.mjs:11984:21)
  at refreshComponent (node_modules/@angular/core/fesm2020/core.mjs:13043:13)
  at refreshChildComponents (node_modules/@angular/core/fesm2020/core.mjs:11759:9)
  at refreshView (node_modules/@angular/core/fesm2020/core.mjs:12019:13)
  at detectChangesInternal (node_modules/@angular/core/fesm2020/core.mjs:13187:9)
  at RootViewRef.detectChanges (node_modules/@angular/core/fesm2020/core.mjs:13699:9)
  at ComponentFixture._tick (node_modules/@angular/core/fesm2020/testing.mjs:140:32)
  at node_modules/@angular/core/fesm2020/testing.mjs:153:22
  at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
  at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
  at Object.onInvoke (node_modules/@angular/core/fesm2020/core.mjs:26231:33)
  at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
  at NgZone.run (node_modules/@angular/core/fesm2020/core.mjs:26085:28)
  at ComponentFixture.detectChanges (node_modules/@angular/core/fesm2020/testing.mjs:152:25)
  at src/app/feature/search/components/map/map.component.spec.ts:33:13
  at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
  at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
  at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
  at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
  at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4330:34)

My package.json (the gist related to leaflet) contains:

"dependencies": {
    ...
    "@asymmetrik/ngx-leaflet": "^14.0.1",
    "@asymmetrik/ngx-leaflet-markercluster": "^14.0.1",
    ...
    "leaflet": "^1.8.0",
    "leaflet.markercluster": "^1.5.3",
},
"devDependencies": {
    ...
    "@types/leaflet": "^1.9.0",
    "@types/leaflet.markercluster": "^1.5.1",
    ...
}

Removing the leafletMarkerCluster directive from the component template passes the test.

What can I do?

Thanks