From 44f0ea99ec26247007c2e4cae0dbf6a586c30a05 Mon Sep 17 00:00:00 2001
From: Xiaoji Chen <cxiaoji@gmail.com>
Date: Sat, 25 Jan 2025 22:57:17 -0800
Subject: [PATCH] Fix tests

---
 .../main/test/components/controls.spec.jsx    | 10 +--
 modules/main/test/components/layer.spec.jsx   |  8 +--
 modules/main/test/components/map.spec.jsx     | 22 ++++++-
 modules/main/test/components/marker.spec.jsx  | 14 ++--
 modules/main/test/components/popup.spec.jsx   |  8 +--
 modules/main/test/components/source.spec.jsx  |  8 +--
 modules/main/test/components/use-map.spec.jsx |  6 +-
 .../test/components/controls.spec.jsx         | 11 ++--
 .../test/components/layer.spec.jsx            | 19 ++++--
 .../react-mapbox/test/components/map.spec.jsx | 57 +++++++++++++++-
 .../test/components/marker.spec.jsx           | 17 +++--
 .../test/components/popup.spec.jsx            |  9 +--
 .../test/components/source.spec.jsx           | 26 ++++++--
 .../test/components/use-map.spec.jsx          | 12 +++-
 modules/react-mapbox/test/utils/token.js      |  1 +
 package.json                                  |  2 +
 yarn.lock                                     | 65 ++++++++++++++++++-
 17 files changed, 233 insertions(+), 62 deletions(-)
 create mode 100644 modules/react-mapbox/test/utils/token.js

diff --git a/modules/main/test/components/controls.spec.jsx b/modules/main/test/components/controls.spec.jsx
index 6f23613e3..85de4c527 100644
--- a/modules/main/test/components/controls.spec.jsx
+++ b/modules/main/test/components/controls.spec.jsx
@@ -17,7 +17,7 @@ test('Controls', async t => {
   const mapRef = {current: null};
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <AttributionControl />
     </Map>
   );
@@ -26,7 +26,7 @@ test('Controls', async t => {
   t.ok(rootContainer.querySelector('.mapboxgl-ctrl-attrib'), 'Rendered <AttributionControl />');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <FullscreenControl />
     </Map>
   );
@@ -35,7 +35,7 @@ test('Controls', async t => {
 
   const geolocateControlRef = {current: null};
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <GeolocateControl ref={geolocateControlRef} />
     </Map>
   );
@@ -44,7 +44,7 @@ test('Controls', async t => {
   t.ok(geolocateControlRef.current, 'GeolocateControl created');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <NavigationControl />
     </Map>
   );
@@ -52,7 +52,7 @@ test('Controls', async t => {
   t.ok(rootContainer.querySelector('.mapboxgl-ctrl-zoom-in'), 'Rendered <NavigationControl />');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <ScaleControl />
     </Map>
   );
diff --git a/modules/main/test/components/layer.spec.jsx b/modules/main/test/components/layer.spec.jsx
index 80ef3102f..10c83c97f 100644
--- a/modules/main/test/components/layer.spec.jsx
+++ b/modules/main/test/components/layer.spec.jsx
@@ -33,7 +33,7 @@ test('Source/Layer', async t => {
   };
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Source id="my-data" type="geojson" data={geoJSON}>
         <Layer id="my-layer" {...pointLayer} />
       </Source>
@@ -45,7 +45,7 @@ test('Source/Layer', async t => {
   t.ok(layer, 'Layer is added');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Source id="my-data" type="geojson" data={geoJSON}>
         <Layer id="my-layer" {...pointLayer2} />
       </Source>
@@ -55,7 +55,7 @@ test('Source/Layer', async t => {
   t.is(layer.visibility, 'none', 'Layer is updated');
 
   root.render(
-    <Map ref={mapRef} mapStyle={mapStyle}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')} mapStyle={mapStyle}>
       <Source id="my-data" type="geojson" data={geoJSON}>
         <Layer id="my-layer" {...pointLayer2} />
       </Source>
@@ -64,7 +64,7 @@ test('Source/Layer', async t => {
   await sleep(50);
   t.ok(mapRef.current.getLayer('my-layer'), 'Layer is added after style change');
 
-  root.render(<Map ref={mapRef} mapStyle={mapStyle} />);
+  root.render(<Map ref={mapRef} mapLib={import('mapbox-gl-v1')} mapStyle={mapStyle} />);
   await sleep(1);
   t.notOk(mapRef.current.getSource('my-data'), 'Source is removed');
   t.notOk(mapRef.current.getLayer('my-layer'), 'Layer is removed');
diff --git a/modules/main/test/components/map.spec.jsx b/modules/main/test/components/map.spec.jsx
index d556c33a2..86cab4dfc 100644
--- a/modules/main/test/components/map.spec.jsx
+++ b/modules/main/test/components/map.spec.jsx
@@ -16,7 +16,12 @@ test('Map', async t => {
   const onLoad = () => onloadCalled++;
 
   root.render(
-    <Map ref={mapRef} initialViewState={{longitude: -100, latitude: 40, zoom: 4}} onLoad={onLoad} />
+    <Map
+      ref={mapRef}
+      mapLib={import('mapbox-gl-v1')}
+      initialViewState={{longitude: -100, latitude: 40, zoom: 4}}
+      onLoad={onLoad}
+    />
   );
 
   await waitForMapLoad(mapRef);
@@ -26,7 +31,16 @@ test('Map', async t => {
   t.is(mapRef.current.getCenter().lat, 40, 'latitude is set');
   t.is(mapRef.current.getZoom(), 4, 'zoom is set');
 
-  root.render(<Map ref={mapRef} longitude={-122} latitude={38} zoom={14} onLoad={onLoad} />);
+  root.render(
+    <Map
+      ref={mapRef}
+      mapLib={import('mapbox-gl-v1')}
+      longitude={-122}
+      latitude={38}
+      zoom={14}
+      onLoad={onLoad}
+    />
+  );
   await sleep(1);
 
   t.is(mapRef.current.getCenter().lng, -122, 'longitude is updated');
@@ -63,6 +77,7 @@ test('Map#uncontrolled', t => {
   root.render(
     <Map
       ref={mapRef}
+      mapLib={import('mapbox-gl-v1')}
       initialViewState={{longitude: -100, latitude: 40, zoom: 4}}
       onLoad={onLoad}
       onRender={onRender}
@@ -90,6 +105,7 @@ test('Map#controlled#no-update', t => {
   root.render(
     <Map
       ref={mapRef}
+      mapLib={import('mapbox-gl-v1')}
       longitude={-100}
       latitude={40}
       zoom={4}
@@ -129,6 +145,7 @@ test('Map#controlled#mirror-back', t => {
     return (
       <Map
         ref={mapRef}
+        mapLib={import('mapbox-gl-v1')}
         {...viewState}
         onLoad={onLoad}
         onMove={e => setViewState(e.viewState)}
@@ -170,6 +187,7 @@ test('Map#controlled#delayed-update', t => {
     return (
       <Map
         ref={mapRef}
+        mapLib={import('mapbox-gl-v1')}
         {...viewState}
         onLoad={onLoad}
         onMove={e => setTimeout(() => setViewState(e.viewState))}
diff --git a/modules/main/test/components/marker.spec.jsx b/modules/main/test/components/marker.spec.jsx
index 6b3199b31..0423adc6a 100644
--- a/modules/main/test/components/marker.spec.jsx
+++ b/modules/main/test/components/marker.spec.jsx
@@ -12,7 +12,7 @@ test('Marker', async t => {
   const mapRef = {current: null};
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Marker ref={markerRef} longitude={-122} latitude={38} />
     </Map>
   );
@@ -31,7 +31,7 @@ test('Marker', async t => {
   const rotationAlignment = marker.getRotationAlignment();
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Marker ref={markerRef} longitude={-122} latitude={38} offset={[0, 0]} />
     </Map>
   );
@@ -40,7 +40,7 @@ test('Marker', async t => {
 
   let callbackType = '';
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Marker
         ref={markerRef}
         longitude={-122}
@@ -48,8 +48,8 @@ test('Marker', async t => {
         offset={[0, 1]}
         rotation={30}
         draggable
-        pitchAlignment="viewport"
-        rotationAlignment="viewport"
+        pitchAlignment="map"
+        rotationAlignment="map"
         onDragStart={() => (callbackType = 'dragstart')}
         onDrag={() => (callbackType = 'drag')}
         onDragEnd={() => (callbackType = 'dragend')}
@@ -71,13 +71,13 @@ test('Marker', async t => {
   marker.fire('dragend');
   t.is(callbackType, 'dragend', 'onDragEnd called');
 
-  root.render(<Map ref={mapRef} />);
+  root.render(<Map ref={mapRef} mapLib={import('mapbox-gl-v1')} />);
   await sleep(1);
 
   t.notOk(markerRef.current, 'marker is removed');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Marker ref={markerRef} longitude={-100} latitude={40}>
         <div id="marker-content" />
       </Marker>
diff --git a/modules/main/test/components/popup.spec.jsx b/modules/main/test/components/popup.spec.jsx
index 972809829..5eb113779 100644
--- a/modules/main/test/components/popup.spec.jsx
+++ b/modules/main/test/components/popup.spec.jsx
@@ -11,7 +11,7 @@ test('Popup', async t => {
   const popupRef = {current: null};
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Popup ref={popupRef} longitude={-122} latitude={38} offset={[0, 10]}>
         You are here
       </Popup>
@@ -27,7 +27,7 @@ test('Popup', async t => {
   const {anchor, offset, maxWidth} = popup.options;
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Popup ref={popupRef} longitude={-122} latitude={38} offset={[0, 10]}>
         <div id="popup-content">You are here</div>
       </Popup>
@@ -39,7 +39,7 @@ test('Popup', async t => {
   t.ok(rootContainer.querySelector('#popup-content'), 'content is rendered');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Popup
         ref={popupRef}
         longitude={-122}
@@ -59,7 +59,7 @@ test('Popup', async t => {
   t.not(maxWidth, popup.options.maxWidth, 'maxWidth is updated');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Popup ref={popupRef} longitude={-122} latitude={38} className="classA">
         <div id="popup-content">You are here</div>
       </Popup>
diff --git a/modules/main/test/components/source.spec.jsx b/modules/main/test/components/source.spec.jsx
index 3a1e9fc54..ac78b3010 100644
--- a/modules/main/test/components/source.spec.jsx
+++ b/modules/main/test/components/source.spec.jsx
@@ -19,7 +19,7 @@ test('Source/Layer', async t => {
   };
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')}>
       <Source id="my-data" type="geojson" data={geoJSON} />
     </Map>
   );
@@ -28,7 +28,7 @@ test('Source/Layer', async t => {
   t.ok(mapRef.current.getSource('my-data'), 'Source is added');
 
   root.render(
-    <Map ref={mapRef} mapStyle={mapStyle}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')} mapStyle={mapStyle}>
       <Source id="my-data" type="geojson" data={geoJSON} />
     </Map>
   );
@@ -36,7 +36,7 @@ test('Source/Layer', async t => {
   t.ok(mapRef.current.getSource('my-data'), 'Source is added after style change');
 
   root.render(
-    <Map ref={mapRef} mapStyle={mapStyle}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v1')} mapStyle={mapStyle}>
       <Source id="my-data" type="geojson" data={geoJSON2} />
     </Map>
   );
@@ -44,7 +44,7 @@ test('Source/Layer', async t => {
   const sourceData = await mapRef.current.getSource('my-data')?._data;
   t.deepEqual(sourceData, geoJSON2, 'Source is updated');
 
-  root.render(<Map ref={mapRef} mapStyle={mapStyle} />);
+  root.render(<Map ref={mapRef} mapLib={import('mapbox-gl-v1')} mapStyle={mapStyle} />);
   await sleep(1);
   t.notOk(mapRef.current.getSource('my-data'), 'Source is removed');
 
diff --git a/modules/main/test/components/use-map.spec.jsx b/modules/main/test/components/use-map.spec.jsx
index 85b800e4a..0a7c75f15 100644
--- a/modules/main/test/components/use-map.spec.jsx
+++ b/modules/main/test/components/use-map.spec.jsx
@@ -16,8 +16,8 @@ test('useMap', async t => {
 
   root.render(
     <MapProvider>
-      <Map id="mapA" />
-      <Map id="mapB" ref={mapRef} />
+      <Map id="mapA" mapLib={import('mapbox-gl-v1')} />
+      <Map id="mapB" ref={mapRef} mapLib={import('mapbox-gl-v1')} />
       <TestControl />
     </MapProvider>
   );
@@ -29,7 +29,7 @@ test('useMap', async t => {
 
   root.render(
     <MapProvider>
-      <Map id="mapA" />
+      <Map id="mapA" mapLib={import('mapbox-gl-v1')} />
       <TestControl />
     </MapProvider>
   );
diff --git a/modules/react-mapbox/test/components/controls.spec.jsx b/modules/react-mapbox/test/components/controls.spec.jsx
index 0b5b22653..ec8ab22bd 100644
--- a/modules/react-mapbox/test/components/controls.spec.jsx
+++ b/modules/react-mapbox/test/components/controls.spec.jsx
@@ -10,6 +10,7 @@ import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 import test from 'tape-promise/tape';
 import {sleep, waitForMapLoad} from '../utils/test-utils';
+import {MapboxAccessToken} from '../utils/token';
 
 test('Controls', async t => {
   const rootContainer = document.createElement('div');
@@ -17,7 +18,7 @@ test('Controls', async t => {
   const mapRef = {current: null};
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <AttributionControl />
     </Map>
   );
@@ -26,7 +27,7 @@ test('Controls', async t => {
   t.ok(rootContainer.querySelector('.mapboxgl-ctrl-attrib'), 'Rendered <AttributionControl />');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <FullscreenControl />
     </Map>
   );
@@ -35,7 +36,7 @@ test('Controls', async t => {
 
   const geolocateControlRef = {current: null};
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <GeolocateControl ref={geolocateControlRef} />
     </Map>
   );
@@ -44,7 +45,7 @@ test('Controls', async t => {
   t.ok(geolocateControlRef.current, 'GeolocateControl created');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <NavigationControl />
     </Map>
   );
@@ -52,7 +53,7 @@ test('Controls', async t => {
   t.ok(rootContainer.querySelector('.mapboxgl-ctrl-zoom-in'), 'Rendered <NavigationControl />');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <ScaleControl />
     </Map>
   );
diff --git a/modules/react-mapbox/test/components/layer.spec.jsx b/modules/react-mapbox/test/components/layer.spec.jsx
index 5b1c29957..d6c2ccd2e 100644
--- a/modules/react-mapbox/test/components/layer.spec.jsx
+++ b/modules/react-mapbox/test/components/layer.spec.jsx
@@ -4,6 +4,7 @@ import {createRoot} from 'react-dom/client';
 import test from 'tape-promise/tape';
 
 import {sleep, waitForMapLoad} from '../utils/test-utils';
+import {MapboxAccessToken} from '../utils/token';
 
 test('Source/Layer', async t => {
   const root = createRoot(document.createElement('div'));
@@ -33,7 +34,7 @@ test('Source/Layer', async t => {
   };
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <Source id="my-data" type="geojson" data={geoJSON}>
         <Layer id="my-layer" {...pointLayer} />
       </Source>
@@ -41,21 +42,25 @@ test('Source/Layer', async t => {
   );
   await waitForMapLoad(mapRef);
   await sleep(1);
-  const layer = mapRef.current.getLayer('my-layer');
-  t.ok(layer, 'Layer is added');
+  t.ok(mapRef.current.getLayer('my-layer'), 'Layer is added');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <Source id="my-data" type="geojson" data={geoJSON}>
         <Layer id="my-layer" {...pointLayer2} />
       </Source>
     </Map>
   );
   await sleep(1);
-  t.is(layer.visibility, 'none', 'Layer is updated');
+  t.is(mapRef.current.getLayer('my-layer').layout.visibility, 'none', 'Layer is updated');
 
   root.render(
-    <Map ref={mapRef} mapStyle={mapStyle}>
+    <Map
+      ref={mapRef}
+      mapLib={import('mapbox-gl-v3')}
+      mapStyle={mapStyle}
+      mapboxAccessToken={MapboxAccessToken}
+    >
       <Source id="my-data" type="geojson" data={geoJSON}>
         <Layer id="my-layer" {...pointLayer2} />
       </Source>
@@ -64,7 +69,7 @@ test('Source/Layer', async t => {
   await sleep(50);
   t.ok(mapRef.current.getLayer('my-layer'), 'Layer is added after style change');
 
-  root.render(<Map ref={mapRef} mapStyle={mapStyle} />);
+  root.render(<Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapStyle={mapStyle} />);
   await sleep(1);
   t.notOk(mapRef.current.getSource('my-data'), 'Source is removed');
   t.notOk(mapRef.current.getLayer('my-layer'), 'Layer is removed');
diff --git a/modules/react-mapbox/test/components/map.spec.jsx b/modules/react-mapbox/test/components/map.spec.jsx
index de6b0c7be..8f5f09225 100644
--- a/modules/react-mapbox/test/components/map.spec.jsx
+++ b/modules/react-mapbox/test/components/map.spec.jsx
@@ -5,6 +5,7 @@ import {createRoot} from 'react-dom/client';
 import test from 'tape-promise/tape';
 
 import {sleep, waitForMapLoad} from '../utils/test-utils';
+import {MapboxAccessToken} from '../utils/token';
 
 test('Map', async t => {
   t.ok(Map, 'Map is defined');
@@ -16,7 +17,13 @@ test('Map', async t => {
   const onLoad = () => onloadCalled++;
 
   root.render(
-    <Map ref={mapRef} initialViewState={{longitude: -100, latitude: 40, zoom: 4}} onLoad={onLoad} />
+    <Map
+      ref={mapRef}
+      mapLib={import('mapbox-gl-v3')}
+      mapboxAccessToken={MapboxAccessToken}
+      initialViewState={{longitude: -100, latitude: 40, zoom: 4}}
+      onLoad={onLoad}
+    />
   );
 
   await waitForMapLoad(mapRef);
@@ -26,7 +33,16 @@ test('Map', async t => {
   t.is(mapRef.current.getCenter().lat, 40, 'latitude is set');
   t.is(mapRef.current.getZoom(), 4, 'zoom is set');
 
-  root.render(<Map ref={mapRef} longitude={-122} latitude={38} zoom={14} onLoad={onLoad} />);
+  root.render(
+    <Map
+      ref={mapRef}
+      mapLib={import('mapbox-gl-v3')}
+      longitude={-122}
+      latitude={38}
+      zoom={14}
+      onLoad={onLoad}
+    />
+  );
   await sleep(1);
 
   t.is(mapRef.current.getCenter().lng, -122, 'longitude is updated');
@@ -40,6 +56,31 @@ test('Map', async t => {
   t.end();
 });
 
+test('Map#invalid token', async t => {
+  const root = createRoot(document.createElement('div'));
+  const mapRef = {current: null};
+
+  let errorMessage = null;
+  const onError = ({error}) => {
+    errorMessage = error.message;
+  };
+
+  root.render(
+    <Map
+      ref={mapRef}
+      mapLib={import('mapbox-gl-v3')}
+      initialViewState={{longitude: -100, latitude: 40, zoom: 4}}
+      onError={onError}
+    />
+  );
+
+  await waitForMapLoad(mapRef);
+
+  t.ok(errorMessage?.includes('access token'), 'Throws on missing access token');
+
+  t.end();
+});
+
 test('Map#uncontrolled', t => {
   const root = createRoot(document.createElement('div'));
   const mapRef = {current: null};
@@ -49,6 +90,7 @@ test('Map#uncontrolled', t => {
   }
   let lastCenter;
   function onRender() {
+    if (!mapRef.current) return;
     const center = mapRef.current.getCenter();
     if (lastCenter) {
       t.ok(lastCenter.lng > center.lng && lastCenter.lat > center.lat, `animated to ${center}`);
@@ -63,6 +105,8 @@ test('Map#uncontrolled', t => {
   root.render(
     <Map
       ref={mapRef}
+      mapLib={import('mapbox-gl-v3')}
+      mapboxAccessToken={MapboxAccessToken}
       initialViewState={{longitude: -100, latitude: 40, zoom: 4}}
       onLoad={onLoad}
       onRender={onRender}
@@ -79,6 +123,7 @@ test('Map#controlled#no-update', t => {
     mapRef.current.easeTo({center: [-122, 38], zoom: 14, duration: 100});
   }
   function onRender() {
+    if (!mapRef.current) return;
     const center = mapRef.current.getCenter();
     t.ok(center.lng === -100 && center.lat === 40, `map center should match props: ${center}`);
   }
@@ -90,6 +135,8 @@ test('Map#controlled#no-update', t => {
   root.render(
     <Map
       ref={mapRef}
+      mapLib={import('mapbox-gl-v3')}
+      mapboxAccessToken={MapboxAccessToken}
       longitude={-100}
       latitude={40}
       zoom={4}
@@ -108,6 +155,7 @@ test('Map#controlled#mirror-back', t => {
     mapRef.current.easeTo({center: [-122, 38], zoom: 14, duration: 100});
   }
   function onRender(vs) {
+    if (!mapRef.current) return;
     const center = mapRef.current.getCenter();
     t.ok(
       vs.longitude === center.lng && vs.latitude === center.lat,
@@ -129,6 +177,8 @@ test('Map#controlled#mirror-back', t => {
     return (
       <Map
         ref={mapRef}
+        mapLib={import('mapbox-gl-v3')}
+        mapboxAccessToken={MapboxAccessToken}
         {...viewState}
         onLoad={onLoad}
         onMove={e => setViewState(e.viewState)}
@@ -149,6 +199,7 @@ test('Map#controlled#delayed-update', t => {
     mapRef.current.easeTo({center: [-122, 38], zoom: 14, duration: 100});
   }
   function onRender(vs) {
+    if (!mapRef.current) return;
     const center = mapRef.current.getCenter();
     t.ok(
       vs.longitude === center.lng && vs.latitude === center.lat,
@@ -170,6 +221,8 @@ test('Map#controlled#delayed-update', t => {
     return (
       <Map
         ref={mapRef}
+        mapLib={import('mapbox-gl-v3')}
+        mapboxAccessToken={MapboxAccessToken}
         {...viewState}
         onLoad={onLoad}
         onMove={e => setTimeout(() => setViewState(e.viewState))}
diff --git a/modules/react-mapbox/test/components/marker.spec.jsx b/modules/react-mapbox/test/components/marker.spec.jsx
index eccd75856..15f19b58c 100644
--- a/modules/react-mapbox/test/components/marker.spec.jsx
+++ b/modules/react-mapbox/test/components/marker.spec.jsx
@@ -4,6 +4,7 @@ import {createRoot} from 'react-dom/client';
 import test from 'tape-promise/tape';
 
 import {sleep, waitForMapLoad} from '../utils/test-utils';
+import {MapboxAccessToken} from '../utils/token';
 
 test('Marker', async t => {
   const rootContainer = document.createElement('div');
@@ -12,7 +13,7 @@ test('Marker', async t => {
   const mapRef = {current: null};
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <Marker ref={markerRef} longitude={-122} latitude={38} />
     </Map>
   );
@@ -31,7 +32,7 @@ test('Marker', async t => {
   const rotationAlignment = marker.getRotationAlignment();
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <Marker ref={markerRef} longitude={-122} latitude={38} offset={[0, 0]} />
     </Map>
   );
@@ -40,7 +41,7 @@ test('Marker', async t => {
 
   let callbackType = '';
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <Marker
         ref={markerRef}
         longitude={-122}
@@ -48,8 +49,8 @@ test('Marker', async t => {
         offset={[0, 1]}
         rotation={30}
         draggable
-        pitchAlignment="viewport"
-        rotationAlignment="viewport"
+        pitchAlignment="map"
+        rotationAlignment="map"
         onDragStart={() => (callbackType = 'dragstart')}
         onDrag={() => (callbackType = 'drag')}
         onDragEnd={() => (callbackType = 'dragend')}
@@ -71,13 +72,15 @@ test('Marker', async t => {
   marker.fire('dragend');
   t.is(callbackType, 'dragend', 'onDragEnd called');
 
-  root.render(<Map ref={mapRef} />);
+  root.render(
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken} />
+  );
   await sleep(1);
 
   t.notOk(markerRef.current, 'marker is removed');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <Marker ref={markerRef} longitude={-100} latitude={40}>
         <div id="marker-content" />
       </Marker>
diff --git a/modules/react-mapbox/test/components/popup.spec.jsx b/modules/react-mapbox/test/components/popup.spec.jsx
index 14cdb1f05..9028167e9 100644
--- a/modules/react-mapbox/test/components/popup.spec.jsx
+++ b/modules/react-mapbox/test/components/popup.spec.jsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 import test from 'tape-promise/tape';
 import {sleep, waitForMapLoad} from '../utils/test-utils';
+import {MapboxAccessToken} from '../utils/token';
 
 test('Popup', async t => {
   const rootContainer = document.createElement('div');
@@ -11,7 +12,7 @@ test('Popup', async t => {
   const popupRef = {current: null};
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <Popup ref={popupRef} longitude={-122} latitude={38} offset={[0, 10]}>
         You are here
       </Popup>
@@ -27,7 +28,7 @@ test('Popup', async t => {
   const {anchor, offset, maxWidth} = popup.options;
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <Popup ref={popupRef} longitude={-122} latitude={38} offset={[0, 10]}>
         <div id="popup-content">You are here</div>
       </Popup>
@@ -39,7 +40,7 @@ test('Popup', async t => {
   t.ok(rootContainer.querySelector('#popup-content'), 'content is rendered');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <Popup
         ref={popupRef}
         longitude={-122}
@@ -59,7 +60,7 @@ test('Popup', async t => {
   t.not(maxWidth, popup.options.maxWidth, 'maxWidth is updated');
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <Popup ref={popupRef} longitude={-122} latitude={38} className="classA">
         <div id="popup-content">You are here</div>
       </Popup>
diff --git a/modules/react-mapbox/test/components/source.spec.jsx b/modules/react-mapbox/test/components/source.spec.jsx
index db99677d7..80296d50f 100644
--- a/modules/react-mapbox/test/components/source.spec.jsx
+++ b/modules/react-mapbox/test/components/source.spec.jsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 import test from 'tape-promise/tape';
 import {sleep, waitForMapLoad} from '../utils/test-utils';
+import {MapboxAccessToken} from '../utils/token';
 
 test('Source/Layer', async t => {
   const root = createRoot(document.createElement('div'));
@@ -19,7 +20,7 @@ test('Source/Layer', async t => {
   };
 
   root.render(
-    <Map ref={mapRef}>
+    <Map ref={mapRef} mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken}>
       <Source id="my-data" type="geojson" data={geoJSON} />
     </Map>
   );
@@ -28,7 +29,12 @@ test('Source/Layer', async t => {
   t.ok(mapRef.current.getSource('my-data'), 'Source is added');
 
   root.render(
-    <Map ref={mapRef} mapStyle={mapStyle}>
+    <Map
+      ref={mapRef}
+      mapLib={import('mapbox-gl-v3')}
+      mapStyle={mapStyle}
+      mapboxAccessToken={MapboxAccessToken}
+    >
       <Source id="my-data" type="geojson" data={geoJSON} />
     </Map>
   );
@@ -36,7 +42,12 @@ test('Source/Layer', async t => {
   t.ok(mapRef.current.getSource('my-data'), 'Source is added after style change');
 
   root.render(
-    <Map ref={mapRef} mapStyle={mapStyle}>
+    <Map
+      ref={mapRef}
+      mapLib={import('mapbox-gl-v3')}
+      mapStyle={mapStyle}
+      mapboxAccessToken={MapboxAccessToken}
+    >
       <Source id="my-data" type="geojson" data={geoJSON2} />
     </Map>
   );
@@ -44,7 +55,14 @@ test('Source/Layer', async t => {
   const sourceData = await mapRef.current.getSource('my-data')?._data;
   t.deepEqual(sourceData, geoJSON2, 'Source is updated');
 
-  root.render(<Map ref={mapRef} mapStyle={mapStyle} />);
+  root.render(
+    <Map
+      ref={mapRef}
+      mapLib={import('mapbox-gl-v3')}
+      mapStyle={mapStyle}
+      mapboxAccessToken={MapboxAccessToken}
+    />
+  );
   await sleep(1);
   t.notOk(mapRef.current.getSource('my-data'), 'Source is removed');
 
diff --git a/modules/react-mapbox/test/components/use-map.spec.jsx b/modules/react-mapbox/test/components/use-map.spec.jsx
index 2edfd2e83..e109d92bb 100644
--- a/modules/react-mapbox/test/components/use-map.spec.jsx
+++ b/modules/react-mapbox/test/components/use-map.spec.jsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 import test from 'tape-promise/tape';
 import {sleep, waitForMapLoad} from '../utils/test-utils';
+import {MapboxAccessToken} from '../utils/token';
 
 test('useMap', async t => {
   const root = createRoot(document.createElement('div'));
@@ -16,8 +17,13 @@ test('useMap', async t => {
 
   root.render(
     <MapProvider>
-      <Map id="mapA" />
-      <Map id="mapB" ref={mapRef} />
+      <Map id="mapA" mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken} />
+      <Map
+        id="mapB"
+        ref={mapRef}
+        mapLib={import('mapbox-gl-v3')}
+        mapboxAccessToken={MapboxAccessToken}
+      />
       <TestControl />
     </MapProvider>
   );
@@ -29,7 +35,7 @@ test('useMap', async t => {
 
   root.render(
     <MapProvider>
-      <Map id="mapA" />
+      <Map id="mapA" mapLib={import('mapbox-gl-v3')} mapboxAccessToken={MapboxAccessToken} />
       <TestControl />
     </MapProvider>
   );
diff --git a/modules/react-mapbox/test/utils/token.js b/modules/react-mapbox/test/utils/token.js
new file mode 100644
index 000000000..d9cf5adb7
--- /dev/null
+++ b/modules/react-mapbox/test/utils/token.js
@@ -0,0 +1 @@
+export const MapboxAccessToken = import.meta.env.VITE_MAPBOX_TOKEN;
diff --git a/package.json b/package.json
index cf498da8e..b706b4f34 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,8 @@
     "@types/react": "^16.0.0",
     "@vis.gl/dev-tools": "1.0.0-alpha.21",
     "@vis.gl/ts-plugins": "1.0.0-alpha.21",
+    "mapbox-gl-v1": "npm:mapbox-gl@1.13.0",
+    "mapbox-gl-v3": "npm:mapbox-gl@3.9.0",
     "pre-commit": "^1.2.2",
     "puppeteer": "^22.4.0",
     "react": "^18.0.0",
diff --git a/yarn.lock b/yarn.lock
index f7f1bb813..638e5e817 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5207,6 +5207,69 @@ map-obj@^4.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
+"mapbox-gl-v1@npm:mapbox-gl@1.13.0":
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-1.13.0.tgz#23b339ba5116b7e3b5a2043ea968f7fcb53e34a6"
+  integrity sha512-g8zlzuJxYJqbOPXT19/UBYpVrcefBQ06F/Cbj0fyEfFnFesDcU3cFTxd75/FZ6Upx2ZEjCsD61CHxrcxZidVpA==
+  dependencies:
+    "@mapbox/geojson-rewind" "^0.5.0"
+    "@mapbox/geojson-types" "^1.0.2"
+    "@mapbox/jsonlint-lines-primitives" "^2.0.2"
+    "@mapbox/mapbox-gl-supported" "^1.5.0"
+    "@mapbox/point-geometry" "^0.1.0"
+    "@mapbox/tiny-sdf" "^1.1.1"
+    "@mapbox/unitbezier" "^0.0.0"
+    "@mapbox/vector-tile" "^1.3.1"
+    "@mapbox/whoots-js" "^3.1.0"
+    csscolorparser "~1.0.3"
+    earcut "^2.2.2"
+    geojson-vt "^3.2.1"
+    gl-matrix "^3.2.1"
+    grid-index "^1.1.0"
+    minimist "^1.2.5"
+    murmurhash-js "^1.0.0"
+    pbf "^3.2.1"
+    potpack "^1.0.1"
+    quickselect "^2.0.0"
+    rw "^1.3.3"
+    supercluster "^7.1.0"
+    tinyqueue "^2.0.3"
+    vt-pbf "^3.1.1"
+
+"mapbox-gl-v3@npm:mapbox-gl@3.9.0":
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-3.9.0.tgz#b6d0720f80d9ef3c8091359f2840615c7e973f48"
+  integrity sha512-QKAxLHcbdoqobXuhu2PP6HJDSy0/GhfZuO5O8BrmwfR0ihZbA5ihYD/u0wGqu2QTDWi/DbgCWJIlV2mXh2Sekg==
+  dependencies:
+    "@mapbox/jsonlint-lines-primitives" "^2.0.2"
+    "@mapbox/mapbox-gl-supported" "^3.0.0"
+    "@mapbox/point-geometry" "^0.1.0"
+    "@mapbox/tiny-sdf" "^2.0.6"
+    "@mapbox/unitbezier" "^0.0.1"
+    "@mapbox/vector-tile" "^1.3.1"
+    "@mapbox/whoots-js" "^3.1.0"
+    "@types/geojson" "^7946.0.15"
+    "@types/geojson-vt" "^3.2.5"
+    "@types/mapbox__point-geometry" "^0.1.4"
+    "@types/mapbox__vector-tile" "^1.3.4"
+    "@types/pbf" "^3.0.5"
+    "@types/supercluster" "^7.1.3"
+    cheap-ruler "^4.0.0"
+    csscolorparser "~1.0.3"
+    earcut "^3.0.0"
+    geojson-vt "^4.0.2"
+    gl-matrix "^3.4.3"
+    grid-index "^1.1.0"
+    kdbush "^4.0.2"
+    murmurhash-js "^1.0.0"
+    pbf "^3.2.1"
+    potpack "^2.0.0"
+    quickselect "^3.0.0"
+    serialize-to-js "^3.1.2"
+    supercluster "^8.0.1"
+    tinyqueue "^3.0.0"
+    vt-pbf "^3.1.3"
+
 mapbox-gl@1.13.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-1.13.0.tgz#23b339ba5116b7e3b5a2043ea968f7fcb53e34a6"
@@ -5236,7 +5299,7 @@ mapbox-gl@1.13.0:
     tinyqueue "^2.0.3"
     vt-pbf "^3.1.1"
 
-mapbox-gl@^3.9.3:
+mapbox-gl@^3.9.0:
   version "3.9.3"
   resolved "https://registry.yarnpkg.com/mapbox-gl/-/mapbox-gl-3.9.3.tgz#07e67fd774af52b6e50e82172ee8f1f016d74618"
   integrity sha512-31mh95f35srpBMxAP32F9dKQXz7pT5VxQA5r6bFY6Aa5G6Z6NC/SVOTyWR+G/wY8wXWTHAnOaAAf5UkD5++/Kg==