Add unit test for expo web metro bundler setup (#2025)

* Add unit test for expo web * Update
microsoft · Sep 8, 2023 · 88c519c · 88c519c
1 parent 529a533
commit 88c519c
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 15 deletions.
diff --git a/src/common/reactNativeProjectHelper.ts b/src/common/reactNativeProjectHelper.ts
@@ -3,8 +3,10 @@
 
 import * as fs from "fs";
 import * as path from "path";
-import { ProjectVersionHelper } from "./projectVersionHelper";
 import { OutputChannelLogger } from "../extension/log/OutputChannelLogger";
+import { ProjectVersionHelper } from "./projectVersionHelper";
+import { FileSystem } from "./node/fileSystem";
+import { stripJsonTrailingComma } from "./utils";
 
 export interface ParsedPackage {
     packageName: string;
@@ -98,6 +100,19 @@ export class ReactNativeProjectHelper {
         return hermesEnabled;
     }
 
+    public static async UpdateMertoBundlerForExpoWeb(launchArgs: any) {
+        const appJsonPath = path.join(launchArgs.cwd, "app.json");
+        const fs = new FileSystem();
+        const appJson = await fs.readFile(appJsonPath).then(content => {
+            return stripJsonTrailingComma(content.toString());
+        });
+
+        if (!appJson.expo.web.bundler) {
+            appJson.expo.web.bundler = "metro";
+            await fs.writeFile(appJsonPath, JSON.stringify(appJson, null, 2));
+        }
+    }
+
     public static async verifyMetroConfigFile(projectRoot: string) {
         const logger = OutputChannelLogger.getChannel(OutputChannelLogger.MAIN_CHANNEL_NAME, true);
         const version = await ProjectVersionHelper.getReactNativeVersions(projectRoot);

diff --git a/src/debugger/rnDebugSession.ts b/src/debugger/rnDebugSession.ts
@@ -12,6 +12,7 @@ import { TelemetryHelper } from "../common/telemetryHelper";
 import { RnCDPMessageHandler } from "../cdp-proxy/CDPMessageHandlers/rnCDPMessageHandler";
 import { ErrorHelper } from "../common/error/errorHelper";
 import { InternalErrorCode } from "../common/error/internalErrorCode";
+import { ReactNativeProjectHelper } from "../common/reactNativeProjectHelper";
 import { MultipleLifetimesAppWorker } from "./appWorker";
 import {
     DebugSessionBase,
@@ -21,7 +22,6 @@ import {
 } from "./debugSessionBase";
 import { JsDebugConfigAdapter } from "./jsDebugConfigAdapter";
 import { RNSession } from "./debugSessionWrapper";
-import { ReactNativeProjectHelper } from "../common/reactNativeProjectHelper";
 
 nls.config({
     messageFormat: nls.MessageFormat.bundle,

diff --git a/src/debugger/webDebugSession.ts b/src/debugger/webDebugSession.ts
@@ -14,8 +14,7 @@ import { InternalErrorCode } from "../common/error/internalErrorCode";
 import { ReactNativeCDPProxy } from "../cdp-proxy/reactNativeCDPProxy";
 import { Request } from "../common/node/request";
 import { PromiseUtil } from "../common/node/promise";
-import { FileSystem } from "../common/node/fileSystem";
-import { stripJsonTrailingComma } from "../common/utils";
+import { ReactNativeProjectHelper } from "../common/reactNativeProjectHelper";
 import { MultipleLifetimesAppWorker } from "./appWorker";
 import {
     DebugSessionBase,
@@ -225,17 +224,8 @@ export class WebDebugSession extends DebugSessionBase {
         const sdkVersion = await exponentHelper.exponentSdk(true);
         if (parseInt(sdkVersion.substring(0, 2)) >= 49) {
             // If Expo SDK >= 49, add web metro bundler in app.json for expo web debugging
-            const appJsonPath = path.join(launchArgs.cwd, "app.json");
-            const fs = new FileSystem();
-            const appJson = await fs.readFile(appJsonPath).then(content => {
-                return stripJsonTrailingComma(content.toString());
-            });
-
-            if (!appJson.expo.web.bundler) {
-                logger.log("Add metro bundler field to app.json.");
-                appJson.expo.web.bundler = "metro";
-                await fs.writeFile(appJsonPath, JSON.stringify(appJson, null, 2));
-            }
+            logger.log("Check and add metro bundler field to app.json.");
+            await ReactNativeProjectHelper.UpdateMertoBundlerForExpoWeb(launchArgs);
         } else {
             // If Expo SDK < 49, using @expo/webpack-config for expo web debugging
             const nodeModulePath = path.join(launchArgs.cwd, "node_modules");

diff --git a/test/extension/exponent/expoWeb.test.ts b/test/extension/exponent/expoWeb.test.ts
@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for details.
+
+import * as assert from "assert";
+import * as path from "path";
+import { ReactNativeProjectHelper } from "../../../src/common/reactNativeProjectHelper";
+import { FileSystem } from "../../../src/common/node/fileSystem";
+
+suite("expoWeb", function () {
+    test("should add expo web metro bundler in app.json if it's not existing", async () => {
+        const projectPath = path.join(__dirname, "..", "..", "resources", "sampleExpoProject");
+        const launchArgs = {
+            cwd: projectPath,
+        };
+
+        const appJsonPath = path.join(launchArgs.cwd, "app.json");
+        const fs = new FileSystem();
+        const appJson = await fs.readFile(appJsonPath);
+        const jsonString = JSON.stringify(appJson);
+        assert.strictEqual(jsonString.includes("bundler") && jsonString.includes("metro"), false);
+
+        await ReactNativeProjectHelper.UpdateMertoBundlerForExpoWeb(launchArgs);
+        const newAppJson = await fs.readFile(appJsonPath);
+        const newJsonString = JSON.stringify(newAppJson);
+        assert.strictEqual(
+            newJsonString.includes("bundler") && newJsonString.includes("metro"),
+            true,
+        );
+    });
+});
diff --git a/test/resources/sampleExpoProject/app.json b/test/resources/sampleExpoProject/app.json
@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "sampleExpoProject",
+    "slug": "sampleExpoProject",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "sdkVersion": "49.0.0"
+  },
+  "name": "sampleExpoProject"
+}
diff --git a/test/resources/sampleExpoProject/package.json b/test/resources/sampleExpoProject/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "sampleExpoProject",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~49.0.7",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.3",
+    "react-native-web": "~0.19.6",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}