Fix tests

Author: PaulLeCam

packages/core/__tests__/context.tsx

@@ -2,7 +2,12 @@ import { renderHook } from '@testing-library/react'
 import type { Map } from 'leaflet'
 import React, { StrictMode, type ReactNode } from 'react'
 
-import { CONTEXT_VERSION, LeafletContext, createLeafletContext, useLeafletContext } from '../src'
+import {
+  CONTEXT_VERSION,
+  LeafletContext,
+  createLeafletContext,
+  useLeafletContext,
+} from '../src'
 
 export function createWrapper(context) {
   return function Wrapper({ children }: { children: ReactNode }) {
@@ -28,7 +33,7 @@ describe('context', () => {
       const { result } = renderHook(() => useLeafletContext())
       return result.current
     }).toThrow(
-      'No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>'
+      'No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>',
     )
   })
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-leaflet/core",
-  "version": "2.1.0",
+  "version": "3.0.0-beta.1",
   "description": "React Leaflet core",
   "repository": {
     "type": "git",

packages/core/src/index.ts

@@ -1,5 +1,9 @@
 export { useAttribution } from './attribution.js'
-export { type CircleMarkerProps, type CircleProps, updateCircle } from './circle.js'
+export {
+  type CircleMarkerProps,
+  type CircleProps,
+  updateCircle,
+} from './circle.js'
 export {
   createContainerComponent,
   createDivOverlayComponent,

packages/react-leaflet/__tests__/MapContainer.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import { type LatLngExpression, Map } from 'leaflet'
+import { type LatLngExpression, Map as LeafletMap } from 'leaflet'
 import React, { StrictMode, useEffect, useRef } from 'react'
 
 import { MapContainer, useMap } from '../src'
@@ -30,10 +30,15 @@ describe('MapContainer', () => {
 
   describe('provides the Map instance', () => {
     test('with the useMap() hook', (done) => {
+      let doneCalled = false
+
       function TestChild() {
         const map = useMap()
-        expect(map).toBeInstanceOf(Map)
-        done()
+        expect(map).toBeInstanceOf(LeafletMap)
+        if (!doneCalled) {
+          doneCalled = true
+          done()
+        }
         return null
       }
 
@@ -49,10 +54,15 @@ describe('MapContainer', () => {
     })
 
     test('in the ref function', (done) => {
+      let doneCalled = false
+
       const ref = (map) => {
-        if (map !== null) {
-          expect(map).toBeInstanceOf(Map)
-          done()
+        if (map != null) {
+          expect(map).toBeInstanceOf(LeafletMap)
+          if (!doneCalled) {
+            doneCalled = true
+            done()
+          }
         }
       }
 
@@ -64,14 +74,19 @@ describe('MapContainer', () => {
     })
 
     test('in the ref object', (done) => {
+      let doneCalled = false
+
       function Wrapper() {
-        const ref = useRef()
+        const ref = useRef(undefined)
 
         useEffect(() => {
           setTimeout(() => {
-            if (ref.current !== null) {
-              expect(ref.current).toBeInstanceOf(Map)
-              done()
+            if (ref.current != null) {
+              expect(ref.current).toBeInstanceOf(LeafletMap)
+              if (!doneCalled) {
+                doneCalled = true
+                done()
+              }
             }
           }, 50)
         }, [])
@@ -86,12 +101,16 @@ describe('MapContainer', () => {
   test('sets center and zoom props', (done) => {
     const center: LatLngExpression = [1.2, 3.4]
     const zoom = 10
+    let doneCalled = false
 
     const ref = (map) => {
-      if (map !== null) {
+      if (map != null) {
         expect(map.getCenter()).toEqual({ lat: 1.2, lng: 3.4 })
         expect(map.getZoom()).toBe(zoom)
-        done()
+        if (!doneCalled) {
+          doneCalled = true
+          done()
+        }
       }
     }
 

packages/react-leaflet/__tests__/Pane.tsx

@@ -102,7 +102,7 @@ describe('Pane', () => {
   describe('supports refs', () => {
     test('as callback function', (done) => {
       const ref = (pane) => {
-        if (pane !== null) {
+        if (pane != null) {
           expect(pane).toBeInstanceOf(HTMLElement)
           done()
         }
@@ -126,7 +126,7 @@ describe('Pane', () => {
 
     test('as object', (done) => {
       function Wrapper() {
-        const ref = useRef()
+        const ref = useRef(undefined)
 
         useEffect(() => {
           setTimeout(() => {

packages/react-leaflet/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-leaflet",
-  "version": "4.2.1",
+  "version": "5.0.0-beta.1",
   "description": "React components for Leaflet maps",
   "repository": {
     "type": "git",
@@ -35,7 +35,7 @@
     "prepublishOnly": "package-check"
   },
   "dependencies": {
-    "@react-leaflet/core": "workspace:^2.1.0"
+    "@react-leaflet/core": "workspace:^"
   },
   "peerDependencies": {
     "leaflet": "^1.9.0",

packages/react-leaflet/src/MapContainer.tsx

@@ -1,6 +1,6 @@
 import {
-  type LeafletContextInterface,
   LeafletContext,
+  type LeafletContextInterface,
   createLeafletContext,
 } from '@react-leaflet/core'
 import {
@@ -14,9 +14,9 @@ import React, {
   type ReactNode,
   type Ref,
   forwardRef,
-  useCallback,
   useEffect,
   useImperativeHandle,
+  useRef,
   useState,
 } from 'react'
 
@@ -51,12 +51,13 @@ function MapContainerComponent<
 ) {
   const [props] = useState({ className, id, style })
   const [context, setContext] = useState<LeafletContextInterface | null>(null)
-  useImperativeHandle(forwardedRef, () => context?.map ?? undefined, [context])
+  const mapInstanceRef = useRef<LeafletMap>(undefined)
+  useImperativeHandle(forwardedRef, () => mapInstanceRef.current)
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: ref callback
-  const mapRef = useCallback((node: HTMLDivElement | null) => {
-    if (node !== null && context === null) {
+  const mapRef = (node?: HTMLDivElement | null) => {
+    if (node != null && !mapInstanceRef.current) {
       const map = new LeafletMap(node, options)
+      mapInstanceRef.current = map
       if (center != null && zoom != null) {
         map.setView(center, zoom)
       } else if (bounds != null) {
@@ -67,7 +68,7 @@ function MapContainerComponent<
       }
       setContext(createLeafletContext(map))
     }
-  }, [])
+  }
 
   useEffect(() => {
     return () => {

packages/react-leaflet/src/Pane.tsx

@@ -1,6 +1,6 @@
 import {
-  type LeafletContextInterface,
   LeafletContext,
+  type LeafletContextInterface,
   addClassName,
   useLeafletContext,
 } from '@react-leaflet/core'