tamagui: "ReferenceError: navigator is not defined" when testing with `@testing-library/react-native`

Current Behavior

When testing a Tamagui app with jest + @testing-library/react-native, I get the following error.

FAIL  src/MyTest.test.tsx
  ● Test suite failed to run

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

    ReferenceError: navigator is not defined

    > 1 | import { Github, Twitter } from "@tamagui/lucide-icons";
        |                                                        ^
      2 | import { Link, useRouter } from "expo-router";
      3 | import {
      4 |   Button,

      at Object.<anonymous> (node_modules/@tamagui/constants/src/index.ts:13:44)
      at Object.<anonymous> (node_modules/@tamagui/helpers/src/validStyleProps.ts:5:7)
      at Object.<anonymous> (node_modules/@tamagui/helpers/src/index.ts:4:15)
      at Object.<anonymous> (node_modules/@tamagui/web/src/Tamagui.ts:10:22)
      at Object.<anonymous> (node_modules/@tamagui/web/src/index.ts:1:15)
      at Object.<anonymous> (node_modules/@tamagui/core/src/index.ts:16:8)
      at Object.<anonymous> (node_modules/@tamagui/helpers-icon/src/themed.tsx:13:3)
      at Object.<anonymous> (node_modules/@tamagui/helpers-icon/dist/cjs/index.native.js:16:25)
      at Object.<anonymous> (node_modules/@tamagui/lucide-icons/src/icons/accessibility.tsx:24:25)
      at Object.<anonymous> (node_modules/@tamagui/lucide-icons/dist/cjs/index.native.js:1103:28)
      at Object.<anonymous> (app/index.tsx:1:56)
      at Object.<anonymous> (src/MyTest.test.tsx:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.202 s, estimated 2 s
Ran all test suites.

As you can see, web stuff is imported. But it really shouldn’t, because I want my app to be 100% iOS+Android. The crash comes from a variable that is not defined in node_modules/@tamagui/constants/dist/cjs/index.js, which is in fact a web file. It should use node_modules/@tamagui/constants/dist/cjs/index.native.js.

It doesn’t, because node_modules/@tamagui/constants/package.json overrides the module resolution logic (that prioritizes .native.js over .js) because of this:

  "exports": {
    "./package.json": "./package.json",
    ".": {
      "types": "./types/index.d.ts",
      "import": "./dist/esm/index.js",
      "require": "./dist/cjs/index.js"
    }
  },

Removing it solves this first issue (it works on my repro example). I am not sure removing it is a viable solution that could be committed here, though.

But note that I do get more errors on my project. There are other problematic web imports (I’ll probably open other issues, I guess).

Expected Behavior

I should be able to run the tests seamlessly without configuring jest with a web environment.

Tamagui Version

1.61.3

Reproduction

Clone this:

https://github.com/pierpo/tamagui-jest-repro

yarn
yarn test

System Info

No response

Workaround

Patching @tamagui/constants with this seems to work. Also, you might need to adjust your jest.config.js to have the proper native.js module extension prioritized.

diff --git a/package.json b/package.json
index 1ebad5b4aefb5ac315c7a95e64aaf05411cdb748..482e985772feb6f16c2151cf3012fe29acc446c0 100644
--- a/package.json
+++ b/package.json
@@ -21,14 +21,6 @@
     "@tamagui/build": "1.64.4",
     "react": "^18.2.0"
   },
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./types/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    }
-  },
   "peerDependencies": {
     "react": "*"
   },