Fix tests

visgl · Sep 12, 2023 · fc05216 · fc05216
1 parent 451b4fc
commit fc05216
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 42 deletions.
diff --git a/.ocularrc.js b/.ocularrc.js
@@ -13,6 +13,9 @@ export default {
     'react-map-gl/test': resolve('./test'),
     'react-map-gl': resolve('./src')
   },
+  nodeAliases: {
+    'react-dom': resolve('./test/src/utils/react-dom-mock.js')
+  },
 
   browserTest: {
     server: {wait: 5000}

diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "README.md"
   ],
   "scripts": {
-    "typecheck": "tsc -p tsconfig.esm.json --noEmit",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
     "bootstrap": "PUPPETEER_SKIP_DOWNLOAD=true yarn && ocular-bootstrap",
     "build": "ocular-clean && ocular-build",
     "lint": "ocular-lint",

diff --git a/test/node.js b/test/node.js
@@ -1,7 +1,7 @@
-const {JSDOM} = require('jsdom');
+import {JSDOM} from 'jsdom';
 
 const dom = new JSDOM(`<!DOCTYPE html><div id="map"></div>`);
 /* global global */
 global.document = dom.window.document;
 
-require('./src');
+import './src';
diff --git a/test/src/components/map.spec.jsx b/test/src/components/map.spec.jsx
@@ -107,14 +107,13 @@ test('Map#controlled#no-update', async t => {
   });
 });
 
-test('Map#controlled#mirrow-back', async t => {
-  t.plan(5);
+test('Map#controlled#mirror-back', async t => {
+  t.plan(6);
 
   const mapRef = {current: null};
-  let lastLat;
-  function onRender(e) {
+  function onRender(viewState) {
     const {lat} = mapRef.current.getCenter();
-    t.is(lat, lastLat, `latitude should match state: ${lat}`);
+    t.is(lat, viewState.latitude, `latitude should match state: ${lat}`);
   }
 
   function App() {
@@ -124,8 +123,6 @@ test('Map#controlled#mirrow-back', async t => {
       zoom: 4
     });
 
-    lastLat = viewState.latitude;
-
     return (
       <Map
         ref={mapRef}
@@ -135,7 +132,7 @@ test('Map#controlled#mirrow-back', async t => {
           e.target.easeTo({center: [-122, 38], zoom: 14});
         }}
         onMove={e => setViewState(e.viewState)}
-        onRender={onRender}
+        onRender={onRender.bind(null, viewState)}
       />
     );
   }
@@ -146,13 +143,12 @@ test('Map#controlled#mirrow-back', async t => {
 });
 
 test('Map#controlled#delayed-update', async t => {
-  t.plan(6);
+  t.plan(7);
 
   const mapRef = {current: null};
-  let lastLat;
-  function onRender(e) {
+  function onRender(viewState) {
     const {lat} = mapRef.current.getCenter();
-    t.is(lat, lastLat, `latitude should match state: ${lat}`);
+    t.is(lat, viewState.latitude, `latitude should match state: ${lat}`);
   }
 
   function App() {
@@ -162,8 +158,6 @@ test('Map#controlled#delayed-update', async t => {
       zoom: 4
     });
 
-    lastLat = viewState.latitude;
-
     return (
       <Map
         ref={mapRef}
@@ -173,7 +167,7 @@ test('Map#controlled#delayed-update', async t => {
           e.target.easeTo({center: [-122, 38], zoom: 14});
         }}
         onMove={e => setTimeout(() => setViewState(e.viewState))}
-        onRender={onRender}
+        onRender={onRender.bind(null, viewState)}
       />
     );
   }

diff --git a/test/src/components/marker.spec.jsx b/test/src/components/marker.spec.jsx
@@ -3,11 +3,10 @@ import * as React from 'react';
 import {create, act} from 'react-test-renderer';
 import test from 'tape-promise/tape';
 
-import {createPortalMock, waitForMapLoad} from '../utils/test-utils';
+import {waitForMapLoad} from '../utils/test-utils';
 import mapboxMock from '../utils/mapbox-gl-mock';
 
 test('Marker', async t => {
-  const restoreMock = createPortalMock();
   const mapRef = {current: null};
 
   let map;
@@ -93,7 +92,5 @@ test('Marker', async t => {
 
   map.unmount();
 
-  restoreMock();
-
   t.end();
 });
diff --git a/test/src/components/popup.spec.jsx b/test/src/components/popup.spec.jsx
@@ -3,11 +3,10 @@ import * as React from 'react';
 import {create, act} from 'react-test-renderer';
 import test from 'tape-promise/tape';
 
-import {createPortalMock, waitForMapLoad} from '../utils/test-utils';
+import {waitForMapLoad} from '../utils/test-utils';
 import mapboxMock from '../utils/mapbox-gl-mock';
 
 test('Popup', async t => {
-  const restoreMock = createPortalMock();
   const mapRef = {current: null};
 
   let map;
@@ -72,7 +71,5 @@ test('Popup', async t => {
 
   t.is(popup.options.className, 'classA', 'className is updated');
 
-  restoreMock();
-
   t.end();
 });
diff --git a/test/src/utils/react-dom-mock.js b/test/src/utils/react-dom-mock.js
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export function createPortal(element, container) {
+  return <div>{element}</div>;
+}
diff --git a/test/src/utils/test-utils.jsx b/test/src/utils/test-utils.jsx
@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 /* global setTimeout */
 export function sleep(milliseconds) {
   return new Promise(resolve => setTimeout(resolve, milliseconds));
@@ -17,14 +15,3 @@ export function waitForMapLoad(mapRef) {
     check();
   });
 }
-
-export function createPortalMock() {
-  const reactDom = require('react-dom');
-  const createPortal = reactDom.createPortal;
-  reactDom.createPortal = function mockCreatePortal(content, container) {
-    return <div>{content}</div>;
-  };
-  return () => {
-    reactDom.createPortal = createPortal;
-  };
-}
diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es2018",
+    "target": "es2020",
     "jsx": "react",
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "target": "es2018",
-    "module": "commonjs",
+    "target": "es2020",
+    "module": "es2020",
     "jsx": "react",
     "allowJs": true,
     "allowSyntheticDefaultImports": true,