diff --git a/.ocularrc.js b/.ocularrc.js index 3b01ff28e..4d36f2eb0 100644 --- 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 index 6095cf80b..9ff696d49 100644 --- 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 index 9b8157549..ed67e839a 100644 --- a/test/node.js +++ b/test/node.js @@ -1,7 +1,7 @@ -const {JSDOM} = require('jsdom'); +import {JSDOM} from 'jsdom'; const dom = new JSDOM(`
`); /* 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 index 3b5037e77..4ecb772d2 100644 --- 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 ( { 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 ( { 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 index d4d516ef1..242c4bfdb 100644 --- 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 index d57b6fd74..30b950fdc 100644 --- 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 new file mode 100644 index 000000000..6176e5b1d --- /dev/null +++ b/test/src/utils/react-dom-mock.js @@ -0,0 +1,5 @@ +import * as React from 'react'; + +export function createPortal(element, container) { + return
{element}
; +} diff --git a/test/src/utils/test-utils.jsx b/test/src/utils/test-utils.jsx index 954e7df1d..18f14a587 100644 --- 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
{content}
; - }; - return () => { - reactDom.createPortal = createPortal; - }; -} diff --git a/tsconfig.build.json b/tsconfig.build.json index db663d02c..0920b2f84 100644 --- 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 index 562eee236..dd1d8b07f 100644 --- 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,