fix(build): avoid replacing node global values

release-npm

package.json

@@ -18,10 +18,10 @@
   "scripts": {
     "app": "node create-app.js",
     "app:install": "npm i --no-save $(npm pack . | tail -1)  --prefix app",
-    "build": "esbuild index.tsx --outdir=dist --bundle --minify --format=esm --sourcemap --external:react-native --external:react && tsc",
+    "build": "esbuild index.tsx --outdir=dist --bundle --minify --format=esm --platform=neutral --sourcemap --external:react-native --external:react && tsc",
     "watch": "npm-run-all --parallel build:watch copy",
     "copy": "cpx 'dist/**/*' app/node_modules/reactigation/dist --watch",
-    "build:watch": "esbuild index.tsx --watch --outdir=dist --bundle --format=esm --sourcemap --external:react-native --external:react",
+    "build:watch": "esbuild index.tsx --watch --outdir=dist --bundle --format=esm --platform=neutral --sourcemap --external:react-native --external:react",
     "test": "jest",
     "test:watch": "jest --watchAll",
     "lint": "eslint . --fix --ext .js,.jsx,.ts,.tsx",

test/basic.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import { Animated } from 'react-native'
+import { Animated, Text } from 'react-native'
 import { act } from 'react-test-renderer'
 import Navigation, { go, back, destroy, Transition, initial } from 'reactigation'
 import render from './utils/render-to-tree'
 import setupScreens from './utils/setup-screens'
+import { Screen } from './components/Screen'
 
 // @ts-ignore Animated won't work in test enviroment, mock it to resolve immediately.
 Animated.timing = () => ({
@@ -276,7 +277,11 @@ test('Only one screen visible in headless mode.', () => {
   const names = ['FirstScreen', 'SecondScreen', 'ThirdScreen']
   const input = setupScreens(names)
 
-  render(<Navigation headless />)
+  const { root } = render(<Navigation headless />)
+
+  let screens = root.findAllByType(Screen)
+
+  expect(screens.length).toBe(1)
 
   expect(input[0].mock.calls.length).toEqual(1)
   expect(input[0].effectMock.calls.length).toEqual(1)
@@ -285,6 +290,15 @@ test('Only one screen visible in headless mode.', () => {
     go(names[1])
   })
 
+  screens = root.findAllByType(Screen)
+  const texts = root.findAllByType(Text)
+  expect(texts.length).toBe(1)
+  // @ts-ignore
+  const title = texts[0]._fiber.child
+  expect(title.pendingProps.children).toEqual('SecondScreen')
+
+  expect(screens.length).toBe(1)
+
   // Back screen not rendered again.
   expect(input[0].mock.calls.length).toEqual(1)
   expect(input[0].effectMock.calls.length).toEqual(1)
@@ -295,6 +309,10 @@ test('Only one screen visible in headless mode.', () => {
     go(names[2])
   })
 
+  screens = root.findAllByType(Screen)
+
+  expect(screens.length).toBe(1)
+
   expect(input[0].mock.calls.length).toEqual(1)
   // Second screen appears during both transitions.
   expect(input[1].mock.calls.length).toEqual(1)

test/components/Screen.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react'
 import { View, Text } from 'react-native'
 
-const Screen = ({
+export const Screen = ({
   renderMock,
   effectMock,
   ...props

test/utils/render-to-tree.ts

@@ -1,8 +1,8 @@
 /* eslint-env jest */
-import renderer, { act } from 'react-test-renderer'
+import renderer, { ReactTestRenderer, act } from 'react-test-renderer'
 
 export default (Navigation: JSX.Element) => {
-  let rendered
+  let rendered: ReactTestRenderer = null
   // act to ensure effects are flushed in initial render.
   act(() => {
     rendered = renderer.create(Navigation)
@@ -14,14 +14,15 @@ export default (Navigation: JSX.Element) => {
   if (Array.isArray(tree)) {
     expect(tree[0].type).toEqual('View')
   } else {
-    expect(tree.type).toEqual('View')
+    expect(tree?.type).toEqual('View')
   }
 
-  const screensRoot = Array.isArray(tree) ? tree[0] : tree
+  const screensRoot: any = Array.isArray(tree) ? tree[0] : tree
 
   expect(screensRoot.children.length > 0).toEqual(true)
 
   return {
+    root: rendered.root,
     tree,
     wrapper: screensRoot,
     wrappers: screensRoot.children,