Setup React 19 beta

package.json

@@ -16,7 +16,6 @@
     "@swc/core": "^1.3.37",
     "@swc/jest": "^0.2.24",
     "@testing-library/react": "^15.0.5",
-    "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.4.0",
     "@types/leaflet": "^1.9.1",
     "@types/warning": "^3.0.0",
@@ -25,13 +24,20 @@
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
     "leaflet": "^1.9.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
+    "react": "beta",
+    "react-dom": "beta",
     "ts-jest-resolver": "^2.0.0",
     "turbo": "^1.8.3",
     "typescript": "^5.4.5"
   },
+  "pnpm": {
+    "overrides": {
+      "@types/react": "npm:types-react@beta",
+      "@types/react-dom": "npm:types-react-dom@beta",
+      "react": "beta",
+      "react-dom": "beta"
+    }
+  },
   "jest": {
     "projects": [
       "<rootDir>/packages/*"

packages/core/__tests__/attribution.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import { useAttribution } from '../src'
 
@@ -15,21 +15,21 @@ describe('attribution', () => {
     })
 
     rerender({ attribution: 'foo' })
-    expect(attributionControl.addAttribution).toBeCalledTimes(1)
-    expect(attributionControl.removeAttribution).toBeCalledTimes(0)
+    expect(attributionControl.addAttribution).toHaveBeenCalledTimes(1)
+    expect(attributionControl.removeAttribution).toHaveBeenCalledTimes(0)
 
     rerender({ attribution: 'foo' })
-    expect(attributionControl.addAttribution).toBeCalledTimes(1)
-    expect(attributionControl.removeAttribution).toBeCalledTimes(0)
+    expect(attributionControl.addAttribution).toHaveBeenCalledTimes(1)
+    expect(attributionControl.removeAttribution).toHaveBeenCalledTimes(0)
 
     rerender({ attribution: 'bar' })
-    expect(attributionControl.addAttribution).toBeCalledTimes(2)
-    expect(attributionControl.addAttribution).toBeCalledWith('bar')
-    expect(attributionControl.removeAttribution).toBeCalledTimes(1)
-    expect(attributionControl.removeAttribution).toBeCalledWith('foo')
+    expect(attributionControl.addAttribution).toHaveBeenCalledTimes(2)
+    expect(attributionControl.addAttribution).toHaveBeenCalledWith('bar')
+    expect(attributionControl.removeAttribution).toHaveBeenCalledTimes(1)
+    expect(attributionControl.removeAttribution).toHaveBeenCalledWith('foo')
 
     rerender({ attribution: null })
-    expect(attributionControl.removeAttribution).toBeCalledTimes(2)
+    expect(attributionControl.removeAttribution).toHaveBeenCalledTimes(2)
     expect(attributionControl.removeAttribution).toHaveBeenLastCalledWith('bar')
   })
 })

packages/core/__tests__/context.tsx

@@ -1,19 +1,14 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import type { Map } from 'leaflet'
 import React, { StrictMode, type ReactNode } from 'react'
 
-import {
-  CONTEXT_VERSION,
-  LeafletProvider,
-  createLeafletContext,
-  useLeafletContext,
-} from '../src'
+import { CONTEXT_VERSION, LeafletContext, createLeafletContext, useLeafletContext } from '../src'
 
 export function createWrapper(context) {
   return function Wrapper({ children }: { children: ReactNode }) {
     return (
       <StrictMode>
-        <LeafletProvider value={context}>{children}</LeafletProvider>
+        <LeafletContext value={context}>{children}</LeafletContext>
       </StrictMode>
     )
   }
@@ -33,7 +28,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/__tests__/control.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import { createControlHook, createElementHook } from '../src'
 
@@ -14,11 +14,11 @@ describe('control', () => {
     const useControl = createControlHook(useElement)
 
     const { unmount } = renderHook(() => useControl({}), { wrapper })
-    expect(instance.addTo).toBeCalledTimes(1)
-    expect(instance.addTo).toBeCalledWith(context.map)
+    expect(instance.addTo).toHaveBeenCalledTimes(1)
+    expect(instance.addTo).toHaveBeenCalledWith(context.map)
 
     unmount()
-    expect(instance.remove).toBeCalledTimes(1)
+    expect(instance.remove).toHaveBeenCalledTimes(1)
   })
 
   test('useLeafletControl() updates the position', () => {
@@ -35,10 +35,10 @@ describe('control', () => {
       wrapper: createWrapper({ map: true }),
     })
     rerender({ position: 'topleft' })
-    expect(instance.setPosition).toBeCalledTimes(0)
+    expect(instance.setPosition).toHaveBeenCalledTimes(0)
 
     rerender({ position: 'topright' })
-    expect(instance.setPosition).toBeCalledTimes(1)
-    expect(instance.setPosition).toBeCalledWith('topright')
+    expect(instance.setPosition).toHaveBeenCalledTimes(1)
+    expect(instance.setPosition).toHaveBeenCalledWith('topright')
   })
 })

packages/core/__tests__/element.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import { createElementHook } from '../src'
 
@@ -11,8 +11,8 @@ describe('element', () => {
     const useElement = createElementHook(createElementMock)
     renderHook(() => useElement(props, context))
 
-    expect(createElementMock).toBeCalledTimes(1)
-    expect(createElementMock).toBeCalledWith(props, context)
+    expect(createElementMock).toHaveBeenCalledTimes(1)
+    expect(createElementMock).toHaveBeenCalledWith(props, context)
   })
 
   test('calls the element update function', () => {
@@ -25,20 +25,20 @@ describe('element', () => {
     const { rerender } = renderHook((p) => useElement(p, context), {
       initialProps: { test: true },
     })
-    expect(createElementMock).toBeCalledTimes(1)
-    expect(updateElementMock).toBeCalledTimes(0)
+    expect(createElementMock).toHaveBeenCalledTimes(1)
+    expect(updateElementMock).toHaveBeenCalledTimes(0)
 
     rerender({ test: false })
-    expect(updateElementMock).toBeCalledTimes(1)
-    expect(updateElementMock).toBeCalledWith(
+    expect(updateElementMock).toHaveBeenCalledTimes(1)
+    expect(updateElementMock).toHaveBeenCalledWith(
       instance,
       { test: false },
       { test: true },
     )
 
     rerender({ test: false })
-    expect(updateElementMock).toBeCalledTimes(2)
-    expect(updateElementMock).toBeCalledWith(
+    expect(updateElementMock).toHaveBeenCalledTimes(2)
+    expect(updateElementMock).toHaveBeenCalledWith(
       instance,
       { test: false },
       { test: false },

packages/core/__tests__/events.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 import { Layer } from 'leaflet'
 
 import { useEventHandlers } from '../src'

packages/core/__tests__/grid-layer.ts

@@ -9,15 +9,15 @@ describe('grid-layer', () => {
 
     // No change when opacity is the same
     updateGridLayer(layer, { opacity }, { opacity })
-    expect(layer.setOpacity).toBeCalledTimes(0)
+    expect(layer.setOpacity).toHaveBeenCalledTimes(0)
 
     // No change when opacity is nullish
     updateGridLayer(layer, { opacity: undefined }, { opacity })
-    expect(layer.setOpacity).toBeCalledTimes(0)
+    expect(layer.setOpacity).toHaveBeenCalledTimes(0)
 
     updateGridLayer(layer, { opacity: 1 }, { opacity })
-    expect(layer.setOpacity).toBeCalledTimes(1)
-    expect(layer.setOpacity).toBeCalledWith(1)
+    expect(layer.setOpacity).toHaveBeenCalledTimes(1)
+    expect(layer.setOpacity).toHaveBeenCalledWith(1)
   })
 
   test('updateGridLayer() updates the zIndex', () => {
@@ -28,14 +28,14 @@ describe('grid-layer', () => {
 
     // No change when zIndex is the same
     updateGridLayer(layer, { zIndex }, { zIndex })
-    expect(layer.setZIndex).toBeCalledTimes(0)
+    expect(layer.setZIndex).toHaveBeenCalledTimes(0)
 
     // No change when zIndex is nullish
     updateGridLayer(layer, { zIndex: null }, { zIndex })
-    expect(layer.setZIndex).toBeCalledTimes(0)
+    expect(layer.setZIndex).toHaveBeenCalledTimes(0)
 
     updateGridLayer(layer, { zIndex: 20 }, { zIndex })
-    expect(layer.setZIndex).toBeCalledTimes(1)
-    expect(layer.setZIndex).toBeCalledWith(20)
+    expect(layer.setZIndex).toHaveBeenCalledTimes(1)
+    expect(layer.setZIndex).toHaveBeenCalledWith(20)
   })
 })

packages/core/__tests__/layer.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import { useLayerLifecycle } from '../src'
 
@@ -9,12 +9,12 @@ describe('layer', () => {
 
     const element = jest.fn()
     const { unmount } = renderHook(() => useLayerLifecycle(element, context))
-    expect(map.addLayer).toBeCalledTimes(1)
-    expect(map.addLayer).toBeCalledWith(element.instance)
+    expect(map.addLayer).toHaveBeenCalledTimes(1)
+    expect(map.addLayer).toHaveBeenCalledWith(element.instance)
 
     unmount()
-    expect(map.removeLayer).toBeCalledTimes(1)
-    expect(map.removeLayer).toBeCalledWith(element.instance)
+    expect(map.removeLayer).toHaveBeenCalledTimes(1)
+    expect(map.removeLayer).toHaveBeenCalledWith(element.instance)
   })
 
   test('useLayerLifecycle() adds the layer to the layerContainer when set and removes from the map', () => {
@@ -24,14 +24,14 @@ describe('layer', () => {
 
     const element = { instance: jest.fn() }
     const { unmount } = renderHook(() => useLayerLifecycle(element, context))
-    expect(layerContainer.addLayer).toBeCalledTimes(1)
-    expect(layerContainer.addLayer).toBeCalledWith(element.instance)
+    expect(layerContainer.addLayer).toHaveBeenCalledTimes(1)
+    expect(layerContainer.addLayer).toHaveBeenCalledWith(element.instance)
 
     unmount()
-    expect(layerContainer.removeLayer).toBeCalledTimes(1)
+    expect(layerContainer.removeLayer).toHaveBeenCalledTimes(1)
 
-    expect(map.addLayer).toBeCalledTimes(0)
-    expect(map.removeLayer).toBeCalledTimes(1)
-    expect(map.removeLayer).toBeCalledWith(element.instance)
+    expect(map.addLayer).toHaveBeenCalledTimes(0)
+    expect(map.removeLayer).toHaveBeenCalledTimes(1)
+    expect(map.removeLayer).toHaveBeenCalledWith(element.instance)
   })
 })

packages/core/__tests__/media-overlay.ts

@@ -11,16 +11,16 @@ describe('media-overlay', () => {
 
     // No change when bounds are the same
     updateMediaOverlay(overlay, { bounds }, { bounds })
-    expect(overlay.setBounds).toBeCalledTimes(0)
+    expect(overlay.setBounds).toHaveBeenCalledTimes(0)
 
     // No change when bounds are not an instance of LatLngBounds
     updateMediaOverlay(overlay, { bounds: [] }, { bounds })
-    expect(overlay.setBounds).toBeCalledTimes(0)
+    expect(overlay.setBounds).toHaveBeenCalledTimes(0)
 
     const newBounds = latLngBounds([11, 11], [20, 20])
     updateMediaOverlay(overlay, { bounds: newBounds }, { bounds })
-    expect(overlay.setBounds).toBeCalledTimes(1)
-    expect(overlay.setBounds).toBeCalledWith(newBounds)
+    expect(overlay.setBounds).toHaveBeenCalledTimes(1)
+    expect(overlay.setBounds).toHaveBeenCalledWith(newBounds)
   })
 
   test('updateMediaOverlay() updates the opacity', () => {
@@ -31,15 +31,15 @@ describe('media-overlay', () => {
 
     // No change when opacity is the same
     updateMediaOverlay(overlay, { opacity }, { opacity })
-    expect(overlay.setOpacity).toBeCalledTimes(0)
+    expect(overlay.setOpacity).toHaveBeenCalledTimes(0)
 
     // No change when opacity is nullish
     updateMediaOverlay(overlay, { opacity: undefined }, { opacity })
-    expect(overlay.setOpacity).toBeCalledTimes(0)
+    expect(overlay.setOpacity).toHaveBeenCalledTimes(0)
 
     updateMediaOverlay(overlay, { opacity: 1 }, { opacity })
-    expect(overlay.setOpacity).toBeCalledTimes(1)
-    expect(overlay.setOpacity).toBeCalledWith(1)
+    expect(overlay.setOpacity).toHaveBeenCalledTimes(1)
+    expect(overlay.setOpacity).toHaveBeenCalledWith(1)
   })
 
   test('updateMediaOverlay() updates the zIndex', () => {
@@ -50,14 +50,14 @@ describe('media-overlay', () => {
 
     // No change when zIndex is the same
     updateMediaOverlay(overlay, { zIndex }, { zIndex })
-    expect(overlay.setZIndex).toBeCalledTimes(0)
+    expect(overlay.setZIndex).toHaveBeenCalledTimes(0)
 
     // No change when zIndex is nullish
     updateMediaOverlay(overlay, { zIndex: null }, { zIndex })
-    expect(overlay.setZIndex).toBeCalledTimes(0)
+    expect(overlay.setZIndex).toHaveBeenCalledTimes(0)
 
     updateMediaOverlay(overlay, { zIndex: 20 }, { zIndex })
-    expect(overlay.setZIndex).toBeCalledTimes(1)
-    expect(overlay.setZIndex).toBeCalledWith(20)
+    expect(overlay.setZIndex).toHaveBeenCalledTimes(1)
+    expect(overlay.setZIndex).toHaveBeenCalledWith(20)
   })
 })

packages/core/__tests__/path.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks'
+import { renderHook } from '@testing-library/react'
 
 import { usePathOptions } from '../src'
 
@@ -11,18 +11,18 @@ describe('path', () => {
     const { rerender } = renderHook((p) => usePathOptions(element, p), {
       initialProps: { pathOptions: firstOptions },
     })
-    expect(setStyle).toBeCalledTimes(1)
+    expect(setStyle).toHaveBeenCalledTimes(1)
 
     rerender({ pathOptions: firstOptions })
-    expect(setStyle).toBeCalledTimes(1)
+    expect(setStyle).toHaveBeenCalledTimes(1)
 
     const secondOptions = { stroke: 2 }
     rerender({ pathOptions: secondOptions })
-    expect(setStyle).toBeCalledTimes(2)
-    expect(setStyle).toBeCalledWith(secondOptions)
+    expect(setStyle).toHaveBeenCalledTimes(2)
+    expect(setStyle).toHaveBeenCalledWith(secondOptions)
 
     rerender({ pathOptions: null })
-    expect(setStyle).toBeCalledTimes(3)
+    expect(setStyle).toHaveBeenCalledTimes(3)
     expect(setStyle.mock.calls[2][0]).toEqual({})
   })
 })

packages/core/package.json

@@ -35,12 +35,12 @@
   },
   "peerDependencies": {
     "leaflet": "^1.9.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "beta",
+    "react-dom": "beta"
   },
   "devDependencies": {
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11"
+    "@types/react": "npm:types-react@beta",
+    "@types/react-dom": "npm:types-react-dom@beta"
   },
   "jest": {
     "extensionsToTreatAsEsm": [".ts", ".tsx"],