@nx/react-native 18.0.0-beta.1 → 18.0.0-beta.2

package/src/executors/start/start.impl.ts

@@ -16,27 +16,12 @@ export default async function* startExecutor(
   const projectRoot =
     context.projectsConfigurations.projects[context.projectName].root;
 
-  const startProcess = await runCliStart(context.root, projectRoot, options);
+  await runCliStart(context.root, projectRoot, options);
 
   yield {
     port: options.port,
     success: true,
   };
-
-  if (!startProcess) {
-    return;
-  }
-  await new Promise<void>((resolve) => {
-    const processExitListener = (signal?: number | NodeJS.Signals) => () => {
-      startProcess.kill(signal);
-      resolve();
-      process.exit();
-    };
-    process.once('exit', (signal) => startProcess.kill(signal));
-    process.once('SIGTERM', processExitListener);
-    process.once('SIGINT', processExitListener);
-    process.once('SIGQUIT', processExitListener);
-  });
 }
 
 /*
@@ -61,7 +46,9 @@ export async function runCliStart(
       return await startAsync(workspaceRoot, projectRoot, options);
     } catch (error) {
       logger.error(
-        `Failed to start the packager server. Error details: ${error.message}`
+        `Failed to start the packager server. Error details: ${
+          error.message ?? error
+        }`
       );
       throw error;
     }
@@ -80,20 +67,10 @@ function startAsync(
       {
         cwd: pathResolve(workspaceRoot, projectRoot),
         env: process.env,
-        stdio: ['inherit', 'pipe', 'pipe', 'ipc'],
+        stdio: 'inherit',
       }
     );
 
-    childProcess.stdout.on('data', (data) => {
-      process.stdout.write(data);
-      if (data.toString().includes('reload the app')) {
-        resolve(childProcess);
-      }
-    });
-    childProcess.stderr.on('data', (data) => {
-      process.stderr.write(data);
-    });
-
     childProcess.on('error', (err) => {
       reject(err);
     });
@@ -104,6 +81,15 @@ function startAsync(
         reject(code);
       }
     });
+
+    const processExitListener = (signal?: number | NodeJS.Signals) => () => {
+      childProcess.kill(signal);
+      process.exit();
+    };
+    process.once('exit', (signal) => childProcess.kill(signal));
+    process.once('SIGTERM', processExitListener);
+    process.once('SIGINT', processExitListener);
+    process.once('SIGQUIT', processExitListener);
   });
 }
 

package/src/executors/storybook/storybook.impl.d.ts

@@ -1,5 +1,9 @@
 import { ExecutorContext } from '@nx/devkit';
 import { ReactNativeStorybookOptions } from './schema';
+/**
+ * TODO (@xiongemi): remove this function in v19.
+ * @deprecated Going to use the default react storybook target. Use @nx/react:storybook executor instead.
+ */
 export default function reactNativeStorybookExecutor(options: ReactNativeStorybookOptions, context: ExecutorContext): AsyncGenerator<{
     success: boolean;
 }>;

package/src/executors/storybook/storybook.impl.js

@@ -8,13 +8,20 @@ const chalk = require("chalk");
 const glob_1 = require("glob");
 const sync_deps_impl_1 = require("../sync-deps/sync-deps.impl");
 const fs_extra_1 = require("fs-extra");
+/**
+ * TODO (@xiongemi): remove this function in v19.
+ * @deprecated Going to use the default react storybook target. Use @nx/react:storybook executor instead.
+ */
 async function* reactNativeStorybookExecutor(options, context) {
     const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
     devkit_1.logger.info(`${chalk.bold.cyan('info')} To see your Storybook stories on the device, you should start your mobile app for the <platform> of your choice (typically ios or android).`);
     // add storybook addons to app's package.json
     const packageJsonPath = (0, path_1.join)(context.root, projectRoot, 'package.json');
+    const workspacePackageJsonPath = (0, path_1.join)(context.root, 'package.json');
+    const workspacePackageJson = (0, devkit_1.readJsonFile)(workspacePackageJsonPath);
+    const projectPackageJson = (0, devkit_1.readJsonFile)(packageJsonPath);
     if ((0, fileutils_1.fileExists)(packageJsonPath))
-        (0, sync_deps_impl_1.displayNewlyAddedDepsMessage)(context.projectName, await (0, sync_deps_impl_1.syncDeps)(context.projectName, projectRoot, context.root, context.projectGraph, [
+        (0, sync_deps_impl_1.displayNewlyAddedDepsMessage)(context.projectName, await (0, sync_deps_impl_1.syncDeps)(projectPackageJson, packageJsonPath, workspacePackageJson, [
             `@storybook/react-native`,
             '@storybook/addon-ondevice-actions',
             '@storybook/addon-ondevice-backgrounds',

package/src/executors/storybook/storybook.impl.ts

@@ -1,5 +1,5 @@
 import { join } from 'path';
-import { ExecutorContext, logger } from '@nx/devkit';
+import { ExecutorContext, logger, readJsonFile } from '@nx/devkit';
 import { fileExists } from '@nx/workspace/src/utilities/fileutils';
 import * as chalk from 'chalk';
 import { sync as globSync } from 'glob';
@@ -10,7 +10,12 @@ import {
   syncDeps,
 } from '../sync-deps/sync-deps.impl';
 import { writeFileSync } from 'fs-extra';
+import { PackageJson } from 'nx/src/utils/package-json';
 
+/**
+ * TODO (@xiongemi): remove this function in v19.
+ * @deprecated Going to use the default react storybook target. Use @nx/react:storybook executor instead.
+ */
 export default async function* reactNativeStorybookExecutor(
   options: ReactNativeStorybookOptions,
   context: ExecutorContext
@@ -25,14 +30,20 @@ export default async function* reactNativeStorybookExecutor(
 
   // add storybook addons to app's package.json
   const packageJsonPath = join(context.root, projectRoot, 'package.json');
+  const workspacePackageJsonPath = join(context.root, 'package.json');
+
+  const workspacePackageJson = readJsonFile<PackageJson>(
+    workspacePackageJsonPath
+  );
+  const projectPackageJson = readJsonFile<PackageJson>(packageJsonPath);
+
   if (fileExists(packageJsonPath))
     displayNewlyAddedDepsMessage(
       context.projectName,
       await syncDeps(
-        context.projectName,
-        projectRoot,
-        context.root,
-        context.projectGraph,
+        projectPackageJson,
+        packageJsonPath,
+        workspacePackageJson,
         [
           `@storybook/react-native`,
           '@storybook/addon-ondevice-actions',

package/src/executors/sync-deps/sync-deps.impl.d.ts

@@ -1,8 +1,9 @@
-import { ExecutorContext, ProjectGraph } from '@nx/devkit';
+import { ExecutorContext } from '@nx/devkit';
 import { ReactNativeSyncDepsOptions } from './schema';
+import { PackageJson } from 'nx/src/utils/package-json';
 export interface ReactNativeSyncDepsOutput {
     success: boolean;
 }
 export default function syncDepsExecutor(options: ReactNativeSyncDepsOptions, context: ExecutorContext): AsyncGenerator<ReactNativeSyncDepsOutput>;
-export declare function syncDeps(projectName: string, projectRoot: string, workspaceRoot: string, projectGraph: ProjectGraph, include?: string[], exclude?: string[]): Promise<string[]>;
+export declare function syncDeps(projectPackageJson: PackageJson, projectPackageJsonPath: string, workspacePackageJson: PackageJson, include?: string[], exclude?: string[]): Promise<string[]>;
 export declare function displayNewlyAddedDepsMessage(projectName: string, deps: string[]): void;

package/src/executors/sync-deps/sync-deps.impl.js

@@ -4,10 +4,13 @@ exports.displayNewlyAddedDepsMessage = exports.syncDeps = void 0;
 const path_1 = require("path");
 const chalk = require("chalk");
 const devkit_1 = require("@nx/devkit");
-const find_all_npm_dependencies_1 = require("../../utils/find-all-npm-dependencies");
 async function* syncDepsExecutor(options, context) {
     const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
-    displayNewlyAddedDepsMessage(context.projectName, await syncDeps(context.projectName, projectRoot, context.root, context.projectGraph, typeof options.include === 'string'
+    const workspacePackageJsonPath = (0, path_1.join)(context.root, 'package.json');
+    const projectPackageJsonPath = (0, path_1.join)(context.root, projectRoot, 'package.json');
+    const workspacePackageJson = (0, devkit_1.readJsonFile)(workspacePackageJsonPath);
+    const projectPackageJson = (0, devkit_1.readJsonFile)(projectPackageJsonPath);
+    displayNewlyAddedDepsMessage(context.projectName, await syncDeps(projectPackageJson, projectPackageJsonPath, workspacePackageJson, typeof options.include === 'string'
         ? options.include.split(',')
         : options.include, typeof options.exclude === 'string'
         ? options.exclude.split(',')
@@ -15,14 +18,13 @@ async function* syncDepsExecutor(options, context) {
     yield { success: true };
 }
 exports.default = syncDepsExecutor;
-async function syncDeps(projectName, projectRoot, workspaceRoot, projectGraph, include = [], exclude = []) {
-    let npmDeps = (0, find_all_npm_dependencies_1.findAllNpmDependencies)(projectGraph, projectName);
-    const packageJsonPath = (0, path_1.join)(workspaceRoot, projectRoot, 'package.json');
-    const packageJson = (0, devkit_1.readJsonFile)(packageJsonPath);
+async function syncDeps(projectPackageJson, projectPackageJsonPath, workspacePackageJson, include = [], exclude = []) {
+    let npmDeps = Object.keys(workspacePackageJson.dependencies || {});
+    let npmDevdeps = Object.keys(workspacePackageJson.devDependencies || {});
     const newDeps = [];
     let updated = false;
-    if (!packageJson.dependencies) {
-        packageJson.dependencies = {};
+    if (!projectPackageJson.dependencies) {
+        projectPackageJson.dependencies = {};
         updated = true;
     }
     if (include && include.length) {
@@ -31,15 +33,30 @@ async function syncDeps(projectName, projectRoot, workspaceRoot, projectGraph, i
     if (exclude && exclude.length) {
         npmDeps = npmDeps.filter((dep) => !exclude.includes(dep));
     }
+    if (!projectPackageJson.devDependencies) {
+        projectPackageJson.devDependencies = {};
+    }
+    if (!projectPackageJson.dependencies) {
+        projectPackageJson.dependencies = {};
+    }
     npmDeps.forEach((dep) => {
-        if (!packageJson.dependencies[dep]) {
-            packageJson.dependencies[dep] = '*';
+        if (!projectPackageJson.dependencies[dep] &&
+            !projectPackageJson.devDependencies[dep]) {
+            projectPackageJson.dependencies[dep] = '*';
+            newDeps.push(dep);
+            updated = true;
+        }
+    });
+    npmDevdeps.forEach((dep) => {
+        if (!projectPackageJson.dependencies[dep] &&
+            !projectPackageJson.devDependencies[dep]) {
+            projectPackageJson.devDependencies[dep] = '*';
             newDeps.push(dep);
             updated = true;
         }
     });
     if (updated) {
-        (0, devkit_1.writeJsonFile)(packageJsonPath, packageJson);
+        (0, devkit_1.writeJsonFile)(projectPackageJsonPath, projectPackageJson);
     }
     return newDeps;
 }

package/src/executors/sync-deps/sync-deps.impl.ts

@@ -3,14 +3,12 @@ import * as chalk from 'chalk';
 import {
   ExecutorContext,
   logger,
-  ProjectGraph,
   readJsonFile,
   writeJsonFile,
 } from '@nx/devkit';
 
-import { findAllNpmDependencies } from '../../utils/find-all-npm-dependencies';
-
 import { ReactNativeSyncDepsOptions } from './schema';
+import { PackageJson } from 'nx/src/utils/package-json';
 
 export interface ReactNativeSyncDepsOutput {
   success: boolean;
@@ -22,13 +20,22 @@ export default async function* syncDepsExecutor(
 ): AsyncGenerator<ReactNativeSyncDepsOutput> {
   const projectRoot =
     context.projectsConfigurations.projects[context.projectName].root;
+
+  const workspacePackageJsonPath = join(context.root, 'package.json');
+  const projectPackageJsonPath = join(
+    context.root,
+    projectRoot,
+    'package.json'
+  );
+
+  const workspacePackageJson = readJsonFile(workspacePackageJsonPath);
+  const projectPackageJson = readJsonFile(projectPackageJsonPath);
   displayNewlyAddedDepsMessage(
     context.projectName,
     await syncDeps(
-      context.projectName,
-      projectRoot,
-      context.root,
-      context.projectGraph,
+      projectPackageJson,
+      projectPackageJsonPath,
+      workspacePackageJson,
       typeof options.include === 'string'
         ? options.include.split(',')
         : options.include,
@@ -42,21 +49,20 @@ export default async function* syncDepsExecutor(
 }
 
 export async function syncDeps(
-  projectName: string,
-  projectRoot: string,
-  workspaceRoot: string,
-  projectGraph: ProjectGraph,
+  projectPackageJson: PackageJson,
+  projectPackageJsonPath: string,
+  workspacePackageJson: PackageJson,
   include: string[] = [],
   exclude: string[] = []
 ): Promise<string[]> {
-  let npmDeps = findAllNpmDependencies(projectGraph, projectName);
-  const packageJsonPath = join(workspaceRoot, projectRoot, 'package.json');
-  const packageJson = readJsonFile(packageJsonPath);
+  let npmDeps = Object.keys(workspacePackageJson.dependencies || {});
+  let npmDevdeps = Object.keys(workspacePackageJson.devDependencies || {});
+
   const newDeps = [];
   let updated = false;
 
-  if (!packageJson.dependencies) {
-    packageJson.dependencies = {};
+  if (!projectPackageJson.dependencies) {
+    projectPackageJson.dependencies = {};
     updated = true;
   }
 
@@ -67,16 +73,36 @@ export async function syncDeps(
     npmDeps = npmDeps.filter((dep) => !exclude.includes(dep));
   }
 
+  if (!projectPackageJson.devDependencies) {
+    projectPackageJson.devDependencies = {};
+  }
+  if (!projectPackageJson.dependencies) {
+    projectPackageJson.dependencies = {};
+  }
+
   npmDeps.forEach((dep) => {
-    if (!packageJson.dependencies[dep]) {
-      packageJson.dependencies[dep] = '*';
+    if (
+      !projectPackageJson.dependencies[dep] &&
+      !projectPackageJson.devDependencies[dep]
+    ) {
+      projectPackageJson.dependencies[dep] = '*';
+      newDeps.push(dep);
+      updated = true;
+    }
+  });
+  npmDevdeps.forEach((dep) => {
+    if (
+      !projectPackageJson.dependencies[dep] &&
+      !projectPackageJson.devDependencies[dep]
+    ) {
+      projectPackageJson.devDependencies[dep] = '*';
       newDeps.push(dep);
       updated = true;
     }
   });
 
   if (updated) {
-    writeJsonFile(packageJsonPath, packageJson);
+    writeJsonFile(projectPackageJsonPath, projectPackageJson);
   }
 
   return newDeps;

package/src/executors/upgrade/schema.d.ts

@@ -0,0 +1 @@
+export interface UpgradeExecutorSchema {}

package/src/executors/upgrade/schema.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "version": 2,
+  "cli": "nx",
+  "$id": "NxReactNativeUpgrade",
+  "title": "React Native Upgrade Executor",
+  "description": "Upgrade React Native code for project.",
+  "type": "object",
+  "properties": {},
+  "required": []
+}

package/src/executors/upgrade/upgrade.impl.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="node" />
+import { ExecutorContext } from '@nx/devkit';
+import { ChildProcess } from 'child_process';
+import { UpgradeExecutorSchema } from './schema';
+export interface ReactNativeUpgradeOutput {
+    success: boolean;
+}
+/**
+ * This executor is equivalent to `npx react-native upgrade`.
+ * https://github.com/react-native-community/cli/blob/main/packages/cli/src/commands/upgrade/upgrade.ts
+ */
+export default function upgradeExecutor(options: UpgradeExecutorSchema, context: ExecutorContext): AsyncGenerator<ReactNativeUpgradeOutput>;
+export declare function runCliUpgrade(workspaceRoot: string, projectRoot: string): Promise<ChildProcess>;

package/src/executors/upgrade/upgrade.impl.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runCliUpgrade = void 0;
+const path_1 = require("path");
+const child_process_1 = require("child_process");
+/**
+ * This executor is equivalent to `npx react-native upgrade`.
+ * https://github.com/react-native-community/cli/blob/main/packages/cli/src/commands/upgrade/upgrade.ts
+ */
+async function* upgradeExecutor(options, context) {
+    const projectRoot = context.projectsConfigurations.projects[context.projectName].root;
+    await runCliUpgrade(context.root, projectRoot);
+    yield { success: true };
+}
+exports.default = upgradeExecutor;
+function runCliUpgrade(workspaceRoot, projectRoot) {
+    return new Promise((resolve, reject) => {
+        const childProcess = (0, child_process_1.fork)(require.resolve('react-native/cli.js'), ['upgrade'], {
+            stdio: 'inherit',
+            cwd: (0, path_1.resolve)(workspaceRoot, projectRoot),
+            env: process.env,
+        });
+        /**
+         * Ensure the child process is killed when the parent exits
+         */
+        const processExitListener = (signal) => () => {
+            childProcess.kill(signal);
+            process.exit();
+        };
+        process.once('exit', (signal) => childProcess.kill(signal));
+        process.once('SIGTERM', processExitListener);
+        process.once('SIGINT', processExitListener);
+        process.once('SIGQUIT', processExitListener);
+        childProcess.on('error', (err) => {
+            reject(err);
+        });
+        childProcess.on('exit', (code) => {
+            if (code === 0) {
+                resolve(childProcess);
+            }
+            else {
+                reject(code);
+            }
+        });
+    });
+}
+exports.runCliUpgrade = runCliUpgrade;

package/src/executors/upgrade/upgrade.impl.ts

@@ -0,0 +1,64 @@
+import { ExecutorContext } from '@nx/devkit';
+import { resolve as pathResolve } from 'path';
+import { ChildProcess, fork } from 'child_process';
+
+import { UpgradeExecutorSchema } from './schema';
+
+export interface ReactNativeUpgradeOutput {
+  success: boolean;
+}
+
+/**
+ * This executor is equivalent to `npx react-native upgrade`.
+ * https://github.com/react-native-community/cli/blob/main/packages/cli/src/commands/upgrade/upgrade.ts
+ */
+export default async function* upgradeExecutor(
+  options: UpgradeExecutorSchema,
+  context: ExecutorContext
+): AsyncGenerator<ReactNativeUpgradeOutput> {
+  const projectRoot =
+    context.projectsConfigurations.projects[context.projectName].root;
+
+  await runCliUpgrade(context.root, projectRoot);
+  yield { success: true };
+}
+
+export function runCliUpgrade(
+  workspaceRoot: string,
+  projectRoot: string
+): Promise<ChildProcess> {
+  return new Promise<ChildProcess>((resolve, reject) => {
+    const childProcess = fork(
+      require.resolve('react-native/cli.js'),
+      ['upgrade'],
+      {
+        stdio: 'inherit',
+        cwd: pathResolve(workspaceRoot, projectRoot),
+        env: process.env,
+      }
+    );
+
+    /**
+     * Ensure the child process is killed when the parent exits
+     */
+    const processExitListener = (signal?: number | NodeJS.Signals) => () => {
+      childProcess.kill(signal);
+      process.exit();
+    };
+    process.once('exit', (signal) => childProcess.kill(signal));
+    process.once('SIGTERM', processExitListener);
+    process.once('SIGINT', processExitListener);
+    process.once('SIGQUIT', processExitListener);
+
+    childProcess.on('error', (err) => {
+      reject(err);
+    });
+    childProcess.on('exit', (code) => {
+      if (code === 0) {
+        resolve(childProcess);
+      } else {
+        reject(code);
+      }
+    });
+  });
+}

package/src/generators/application/application.js

@@ -3,20 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.reactNativeApplicationGeneratorInternal = exports.reactNativeApplicationGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
-const symlink_task_1 = require("../../utils/symlink-task");
+const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
 const add_linting_1 = require("../../utils/add-linting");
 const add_jest_1 = require("../../utils/add-jest");
 const chmod_android_gradle_files_1 = require("../../utils/chmod-android-gradle-files");
 const pod_install_task_1 = require("../../utils/pod-install-task");
+const web_configuration_1 = require("../web-configuration/web-configuration");
 const normalize_options_1 = require("./lib/normalize-options");
 const init_1 = require("../init/init");
 const add_project_1 = require("./lib/add-project");
 const create_application_files_1 = require("./lib/create-application-files");
-const add_detox_1 = require("./lib/add-detox");
+const add_e2e_1 = require("./lib/add-e2e");
 const ensure_dependencies_1 = require("../../utils/ensure-dependencies");
-const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
+const sync_deps_impl_1 = require("../../executors/sync-deps/sync-deps.impl");
 async function reactNativeApplicationGenerator(host, schema) {
     return await reactNativeApplicationGeneratorInternal(host, {
+        addPlugin: false,
         projectNameAndRootFormat: 'derived',
         ...schema,
     });
@@ -45,18 +47,35 @@ async function reactNativeApplicationGeneratorInternal(host, schema) {
         ],
     });
     tasks.push(lintTask);
-    const jestTask = await (0, add_jest_1.addJest)(host, options.unitTestRunner, options.projectName, options.appProjectRoot, options.js, options.skipPackageJson);
+    const jestTask = await (0, add_jest_1.addJest)(host, options.unitTestRunner, options.projectName, options.appProjectRoot, options.js, options.skipPackageJson, options.addPlugin);
     tasks.push(jestTask);
-    const detoxTask = await (0, add_detox_1.addDetox)(host, options);
-    tasks.push(detoxTask);
-    const symlinkTask = (0, symlink_task_1.runSymlink)(host.root, options.appProjectRoot);
-    tasks.push(symlinkTask);
+    const webTask = await (0, web_configuration_1.webConfigurationGenerator)(host, {
+        ...options,
+        project: options.name,
+        skipFormat: true,
+    });
+    tasks.push(webTask);
+    const e2eTask = await (0, add_e2e_1.addE2e)(host, options);
+    tasks.push(e2eTask);
     const chmodTaskGradlewTask = (0, chmod_android_gradle_files_1.chmodAndroidGradlewFilesTask)((0, devkit_1.joinPathFragments)(host.root, options.androidProjectRoot));
     tasks.push(chmodTaskGradlewTask);
     const podInstallTask = (0, pod_install_task_1.runPodInstall)((0, devkit_1.joinPathFragments)(host.root, options.iosProjectRoot));
     if (options.install) {
+        const workspacePackageJsonPath = (0, devkit_1.joinPathFragments)('package.json');
+        const projectPackageJsonPath = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'package.json');
+        const workspacePackageJson = (0, devkit_1.readJson)(host, workspacePackageJsonPath);
+        const projectPackageJson = (0, devkit_1.readJson)(host, projectPackageJsonPath);
+        await (0, sync_deps_impl_1.syncDeps)(projectPackageJson, projectPackageJsonPath, workspacePackageJson);
         tasks.push(podInstallTask);
     }
+    else {
+        devkit_1.output.log({
+            title: 'Skip `pod install`',
+            bodyLines: [
+                `run 'nx run ${options.name}:pod-install' to install native modules before running iOS app`,
+            ],
+        });
+    }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(host);
     }

package/src/generators/application/application.spec.ts

@@ -24,6 +24,8 @@ describe('app', () => {
       e2eTestRunner: 'none',
       install: false,
       projectNameAndRootFormat: 'as-provided',
+      unitTestRunner: 'none',
+      bundler: 'vite',
     });
     const projects = getProjects(appTree);
 
@@ -39,6 +41,8 @@ describe('app', () => {
       e2eTestRunner: 'none',
       install: false,
       projectNameAndRootFormat: 'as-provided',
+      unitTestRunner: 'none',
+      bundler: 'vite',
     });
 
     const projectConfiguration = readProjectConfiguration(appTree, 'my-app');
@@ -55,6 +59,8 @@ describe('app', () => {
       e2eTestRunner: 'none',
       install: false,
       projectNameAndRootFormat: 'as-provided',
+      unitTestRunner: 'jest',
+      bundler: 'vite',
     });
     expect(appTree.exists('my-app/src/app/App.tsx')).toBeTruthy();
     expect(appTree.exists('my-app/src/main.tsx')).toBeTruthy();
@@ -74,6 +80,17 @@ describe('app', () => {
         moduleNameMapper: {
           '\\\\.svg$': '@nx/react-native/plugins/jest/svg-mock',
         },
+        transform: {
+          '^.+.(js|ts|tsx)$': [
+            'babel-jest',
+            {
+              configFile: __dirname + '/.babelrc.js',
+            },
+          ],
+          '^.+.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp)$': require.resolve(
+            'react-native/jest/assetFileTransformer.js'
+          ),
+        },
         coverageDirectory: '../coverage/my-app',
       };
       "
@@ -88,9 +105,11 @@ describe('app', () => {
       e2eTestRunner: 'none',
       install: false,
       projectNameAndRootFormat: 'as-provided',
+      unitTestRunner: 'jest',
+      bundler: 'vite',
     });
-    const targets = readProjectConfiguration(appTree, 'my-app').targets;
-    expect(targets.test).toBeDefined();
+
+    expect(appTree.exists('my-app/jest.config.ts')).toBeTruthy();
   });
 
   it('should extend from root tsconfig.json when no tsconfig.base.json', async () => {
@@ -103,6 +122,8 @@ describe('app', () => {
       e2eTestRunner: 'none',
       install: false,
       projectNameAndRootFormat: 'as-provided',
+      unitTestRunner: 'none',
+      bundler: 'vite',
     });
 
     const tsconfig = readJson(appTree, 'my-app/tsconfig.json');
@@ -118,6 +139,8 @@ describe('app', () => {
         e2eTestRunner: 'detox',
         install: false,
         projectNameAndRootFormat: 'as-provided',
+        bundler: 'vite',
+        unitTestRunner: 'none',
       });
 
       const projects = getProjects(appTree);
@@ -168,6 +191,8 @@ describe('app', () => {
         e2eTestRunner: 'detox',
         install: false,
         projectNameAndRootFormat: 'as-provided',
+        bundler: 'vite',
+        unitTestRunner: 'none',
       });
 
       const projects = getProjects(appTree);
@@ -223,6 +248,8 @@ describe('app', () => {
         install: false,
         skipPackageJson: true,
         projectNameAndRootFormat: 'as-provided',
+        unitTestRunner: 'none',
+        bundler: 'webpack',
       });
 
       expect(readJson(appTree, 'package.json')).toEqual(packageJsonBefore);