fix(react-native): fix test-setup for react native/expo jest (#23314)

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #23027
#22198

packages/expo/src/generators/application/files/tsconfig.app.json.template

@@ -5,6 +5,6 @@
     "types": ["node"]
   },
   "files": ["<%= offsetFromRoot %>node_modules/@nx/expo/typings/svg.d.ts"],
-  "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.spec.tsx", "test-setup.ts"],
+  "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.spec.tsx", "src/test-setup.ts"],
   "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"]
 }

packages/expo/src/generators/library/files/lib/tsconfig.lib.json.template

@@ -4,6 +4,6 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": ["node"]
   },
-  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "test-setup.ts"],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "src/test-setup.ts"],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }

packages/expo/src/generators/library/library.spec.ts

@@ -198,7 +198,7 @@ describe('lib', () => {
     });
   });
 
-  describe('--unit-test-runner none', () => {
+  describe('--unit-test-runner', () => {
     it('should not generate test configuration', async () => {
       await expoLibraryGenerator(appTree, {
         ...defaultSchema,
@@ -220,6 +220,64 @@ describe('lib', () => {
         }
       `);
     });
+
+    it('should generate test configuration', async () => {
+      await expoLibraryGenerator(appTree, {
+        ...defaultSchema,
+        unitTestRunner: 'jest',
+      });
+
+      expect(appTree.read('my-lib/tsconfig.spec.json', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "{
+          "extends": "./tsconfig.json",
+          "compilerOptions": {
+            "outDir": "../dist/out-tsc",
+            "module": "commonjs",
+            "types": ["jest", "node"]
+          },
+          "files": ["src/test-setup.ts"],
+          "include": [
+            "jest.config.ts",
+            "src/**/*.test.ts",
+            "src/**/*.spec.ts",
+            "src/**/*.test.tsx",
+            "src/**/*.spec.tsx",
+            "src/**/*.test.js",
+            "src/**/*.spec.js",
+            "src/**/*.test.jsx",
+            "src/**/*.spec.jsx",
+            "src/**/*.d.ts"
+          ]
+        }
+        "
+      `);
+      expect(appTree.read('my-lib/jest.config.ts', 'utf-8'))
+        .toMatchInlineSnapshot(`
+        "module.exports = {
+          displayName: 'my-lib',
+          resolver: '@nx/jest/plugins/resolver',
+          preset: 'jest-expo',
+          moduleFileExtensions: ['ts', 'js', 'html', 'tsx', 'jsx'],
+          setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+          moduleNameMapper: {
+            '\\\\.svg$': '@nx/expo/plugins/jest/svg-mock',
+          },
+          transform: {
+            '.[jt]sx?$': [
+              'babel-jest',
+              {
+                configFile: __dirname + '/.babelrc.js',
+              },
+            ],
+            '^.+.(bmp|gif|jpg|jpeg|mp4|png|psd|svg|webp|ttf|otf|m4v|mov|mp4|mpeg|mpg|webm|aac|aiff|caf|m4a|mp3|wav|html|pdf|obj)$':
+              require.resolve('jest-expo/src/preset/assetFileTransformer.js'),
+          },
+          coverageDirectory: '../coverage/my-lib',
+        };
+        "
+      `);
+    });
   });
 
   describe('--buildable', () => {

packages/expo/src/utils/add-jest.ts

@@ -1,4 +1,4 @@
-import { Tree } from '@nx/devkit';
+import { Tree, offsetFromRoot } from '@nx/devkit';
 import { configurationGenerator } from '@nx/jest';
 
 export async function addJest(
@@ -19,7 +19,7 @@ export async function addJest(
     project: projectName,
     supportTsx: true,
     skipSerializers: true,
-    setupFile: 'none',
+    setupFile: 'react-native',
     compiler: 'babel',
     skipPackageJson,
     skipFormat: true,
@@ -34,7 +34,7 @@ export async function addJest(
     resolver: '@nx/jest/plugins/resolver',
     preset: 'jest-expo',
     moduleFileExtensions: ['ts', 'js', 'html', 'tsx', 'jsx'],
-    setupFilesAfterEnv: ['<rootDir>/test-setup.${js ? 'js' : 'ts'}'],
+    setupFilesAfterEnv: ['<rootDir>/src/test-setup.${js ? 'js' : 'ts'}'],
     moduleNameMapper: {
       '\\\\.svg$': '@nx/expo/plugins/jest/svg-mock'
     },
@@ -49,6 +49,9 @@ export async function addJest(
         'jest-expo/src/preset/assetFileTransformer.js'
       ),
     },
+    coverageDirectory: '${offsetFromRoot(
+      appProjectRoot
+    )}coverage/${appProjectRoot}'
   };`;
   host.write(configPath, content);
 

packages/jest/src/generators/configuration/files/src/test-setup.ts__tmpl__

@@ -0,0 +1 @@
+<% if(setupFile === 'react-native') { %>import '@testing-library/jest-native/extend-expect';<% } %>

packages/jest/src/generators/configuration/schema.d.ts

@@ -6,7 +6,7 @@ export interface JestProjectSchema {
    * @deprecated use setupFile instead
    */
   skipSetupFile?: boolean;
-  setupFile?: 'angular' | 'web-components' | 'none';
+  setupFile?: 'angular' | 'web-components' | 'react-native' | 'none';
   skipSerializers?: boolean;
   testEnvironment?: 'node' | 'jsdom' | 'none';
   /**

packages/react-native/src/generators/application/application.spec.ts

@@ -78,7 +78,7 @@ describe('app', () => {
         preset: 'react-native',
         resolver: '@nx/jest/plugins/resolver',
         moduleFileExtensions: ['ts', 'js', 'html', 'tsx', 'jsx'],
-        setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
+        setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
         moduleNameMapper: {
           '\\\\.svg$': '@nx/react-native/plugins/jest/svg-mock',
         },

packages/react-native/src/generators/application/files/app/tsconfig.app.json.template

@@ -5,6 +5,6 @@
     "types": ["node"]
   },
   "files": ["<%= offsetFromRoot %>node_modules/@nx/react-native/typings/svg.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.spec.tsx", "test-setup.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.spec.tsx", "src/test-setup.ts"],
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
 }

packages/react-native/src/generators/library/files/lib/tsconfig.lib.json.template

@@ -4,6 +4,6 @@
     "outDir": "<%= offsetFromRoot %>dist/out-tsc",
     "types": ["node"]
   },
-  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.spec.tsx", "test-setup.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.spec.tsx", "src/test-setup.ts"],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }

packages/react-native/src/generators/library/library.spec.ts

@@ -199,7 +199,7 @@ describe('lib', () => {
     });
   });
 
-  describe('--unit-test-runner none', () => {
+  describe('--unit-test-runner', () => {
     it('should not generate test configuration', async () => {
       await libraryGenerator(appTree, {
         ...defaultSchema,
@@ -225,6 +225,7 @@ describe('lib', () => {
             "module": "commonjs",
             "types": ["jest", "node"]
           },
+          "files": ["src/test-setup.ts"],
           "include": [
             "jest.config.ts",
             "src/**/*.test.ts",
@@ -247,7 +248,7 @@ describe('lib', () => {
           preset: 'react-native',
           resolver: '@nx/jest/plugins/resolver',
           moduleFileExtensions: ['ts', 'js', 'html', 'tsx', 'jsx'],
-          setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
+          setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
           moduleNameMapper: {
             '\\\\.svg$': '@nx/react-native/plugins/jest/svg-mock',
           },

packages/react-native/src/utils/add-jest.ts

@@ -19,7 +19,7 @@ export async function addJest(
     project: projectName,
     supportTsx: true,
     skipSerializers: true,
-    setupFile: 'none',
+    setupFile: 'react-native',
     compiler: 'babel',
     skipPackageJson,
     skipFormat: true,
@@ -33,7 +33,7 @@ export async function addJest(
   preset: 'react-native',
   resolver: '@nx/jest/plugins/resolver',
   moduleFileExtensions: ['ts', 'js', 'html', 'tsx', 'jsx'],
-  setupFilesAfterEnv: ['<rootDir>/test-setup.${js ? 'js' : 'ts'}'],
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.${js ? 'js' : 'ts'}'],
   moduleNameMapper: {
     '\\\\.svg$': '@nx/react-native/plugins/jest/svg-mock'
   },