chore(e2e): Fix issues for resolving dependencies in integration tests

integration/models/application.ts

@@ -55,7 +55,7 @@ export const application = (config: ApplicationConfig, appDirPath: string, appDi
 
       const proc = run(scripts.dev, {
         cwd: appDirPath,
-        env: { PORT: port.toString(), RCT_METRO_PORT: port.toString() },
+        env: { PORT: port.toString() },
         detached: opts.detached,
         stdout: opts.detached ? fs.openSync(stdoutFilePath, 'a') : undefined,
         stderr: opts.detached ? fs.openSync(stderrFilePath, 'a') : undefined,
@@ -88,7 +88,7 @@ export const application = (config: ApplicationConfig, appDirPath: string, appDi
       // it's not using the log function. See the dev() method above
       const proc = run(scripts.serve, {
         cwd: appDirPath,
-        env: { PORT: port.toString(), RCT_METRO_PORT: port.toString() },
+        env: { PORT: port.toString() },
       });
       cleanupFns.push(() => awaitableTreekill(proc.pid, 'SIGKILL'));
       await waitForIdleProcess(proc);

integration/templates/expo-web/metro.config.js

@@ -1,28 +1,44 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
+/**
+ * DO NOT EDIT THIS FILE UNLESS YOU DEFINITELY KNWO WHAT YOU ARE DOING.
+ * THIS ENSURES THAT INTEGRATION TESTS ARE LOADING THE CORRECT DEPENDENCIES.
+ */
 const { getDefaultConfig } = require('expo/metro-config');
 const packageJson = require('./package.json');
 const path = require('node:path');
 
+/** @type {() => string | undefined} */
 const getClerkExpoPath = () => {
   const clerkExpoPath = packageJson.dependencies['@clerk/clerk-expo'];
 
   if (clerkExpoPath?.startsWith('file:')) {
-    return path.resolve(clerkExpoPath.replace('file:', '').replace(/\/packages\/expo$/, ''));
+    return clerkExpoPath.replace('file:', '');
   }
 
   return undefined;
 };
 
-const clerkMonorepo = getClerkExpoPath();
+const clerkExpoPath = getClerkExpoPath();
+const clerkMonorepoPath = clerkExpoPath?.replace(/\/packages\/expo$/, '');
 
 /** @type {import('expo/metro-config').MetroConfig} */
 const config = {
   ...getDefaultConfig(__dirname),
-  watchFolders: [clerkMonorepo],
+  watchFolders: [clerkMonorepoPath],
   resolver: {
     sourceExts: ['js', 'json', 'ts', 'tsx', 'cjs', 'mjs'],
     unstable_enableSymlinks: true,
-    nodeModulesPaths: [path.resolve(__dirname, 'node_modules'), `${clerkMonorepo}/node_modules`],
+    unstable_enablePackageExports: true,
+    nodeModulesPaths: [
+      path.resolve(__dirname, 'node_modules'),
+      clerkExpoPath && `${clerkMonorepoPath}/node_modules`,
+      clerkExpoPath && `${clerkExpoPath}/node_modules`,
+    ],
+    // This is a workaround for a to prevent multiple versions of react and react-native from being loaded.
+    // https://github.com/expo/expo/pull/26209
+    blockList: [
+      clerkExpoPath && new RegExp(`${clerkMonorepoPath}/node_modules/react`),
+      clerkExpoPath && new RegExp(`${clerkMonorepoPath}/node_modules/react-native`),
+    ],
   },
 };
 

integration/templates/expo-web/package.json

@@ -3,10 +3,11 @@
   "main": "expo-router/entry",
   "version": "1.0.0",
   "scripts": {
-    "dev": "expo start --web",
+    "dev": "RCT_METRO_PORT=$PORT expo start --web --port $PORT",
     "build": "expo export -p web",
     "start": "npx serve dist --single",
-    "lint": "expo lint"
+    "lint": "expo lint",
+    "setup": "npm i && expo install"
   },
   "jest": {
     "preset": "jest-expo"
@@ -15,22 +16,23 @@
     "@expo/vector-icons": "^14.0.2",
     "@react-navigation/native": "^6.0.2",
     "expo": "~51.0.17",
-    "expo-constants": "~15.4.6",
+    "expo-constants": "~16.0.2",
     "expo-font": "~12.0.7",
-    "expo-linking": "~6.2.2",
-    "expo-router": "~3.4.10",
+    "expo-linking": "~6.3.1",
+    "expo-router": "~3.5.17",
     "expo-splash-screen": "~0.27.5",
-    "expo-status-bar": "~1.11.1",
+    "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.6",
     "expo-web-browser": "~13.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.2",
+    "react-native": "0.74.3",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.8.2",
-    "react-native-screens": "~3.29.0",
-    "react-native-web": "~0.19.6"
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "~3.31.1",
+    "react-native-web": "~0.19.6",
+    "react-native-url-polyfill": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

integration/tests/expo-web/basic.test.ts

@@ -16,7 +16,8 @@ test.describe('basic expo web @expoWeb', () => {
 
     await app.setup();
     await app.withEnv(appConfigs.envs.withEmailCodes);
-    await app.dev();
+    await app.build();
+    await app.serve();
 
     const u = createTestUtils({ app });
     fakeUser = u.services.users.createFakeUser({

package.json

@@ -38,6 +38,7 @@
     "test:integration:express": "E2E_APP_ID=express.* npm run test:integration:base -- --grep @express",
     "test:integration:generic": "E2E_APP_ID=react.vite.*,next.appRouter.withEmailCodes npm run test:integration:base -- --grep @generic",
     "test:integration:nextjs": "E2E_APP_ID=next.appRouter.* npm run test:integration:base -- --grep @nextjs",
+    "test:integration:expoWeb": "npm run test:integration:base -- --grep @expoWeb --headed",
     "test:integration:quickstart": "E2E_APP_ID=quickstart.* npm run test:integration:base -- --grep @quickstart",
     "test:integration:remix": "echo 'placeholder'",
     "turbo:clean": "turbo daemon clean",

packages/expo/package.json

@@ -59,8 +59,8 @@
     "@clerk/shared": "2.3.2",
     "@clerk/types": "4.7.0",
     "base-64": "^1.0.0",
-    "react": "^18.2.0",
-    "react-native-url-polyfill": "2.0.0",
+    "react": ">=18",
+    "react-native-url-polyfill": "^2.0.0",
     "tslib": "2.4.1"
   },
   "devDependencies": {