feat(angular): use new test environment function from `jest-preset-an…

…gular` (#29169)

<!-- 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` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## 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 #29165

packages/angular/src/generators/utils/add-jest.spec.ts

@@ -0,0 +1,54 @@
+import type { Tree } from '@nx/devkit';
+import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
+import { UnitTestRunner } from '../../utils/test-runners';
+import { addJest } from './add-jest';
+import { generateTestApplication } from './testing';
+
+describe('addJest', () => {
+  let tree: Tree;
+
+  beforeEach(async () => {
+    tree = createTreeWithEmptyWorkspace();
+    await generateTestApplication(tree, {
+      name: 'app1',
+      directory: 'app1',
+      unitTestRunner: UnitTestRunner.None,
+      skipFormat: true,
+    });
+  });
+
+  it('generate the test setup file', async () => {
+    await addJest(tree, {
+      name: 'app1',
+      projectRoot: 'app1',
+      skipPackageJson: false,
+      strict: false,
+    });
+
+    expect(tree.read('app1/src/test-setup.ts', 'utf-8')).toMatchInlineSnapshot(`
+      "import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+      setupZoneTestEnv();
+      "
+    `);
+  });
+
+  it('generate the test setup file with strict', async () => {
+    await addJest(tree, {
+      name: 'app1',
+      projectRoot: 'app1',
+      skipPackageJson: false,
+      strict: true,
+    });
+
+    expect(tree.read('app1/src/test-setup.ts', 'utf-8')).toMatchInlineSnapshot(`
+      "import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+      setupZoneTestEnv({
+        errorOnUnknownElements: true,
+        errorOnUnknownProperties: true
+      });
+      "
+    `);
+  });
+});

packages/angular/src/generators/utils/add-jest.ts

@@ -53,14 +53,13 @@ export async function addJest(
     const contents = tree.read(setupFile, 'utf-8');
     tree.write(
       setupFile,
-      `// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
-globalThis.ngJest = {
-  testEnvironmentOptions: {
-    errorOnUnknownElements: true,
-    errorOnUnknownProperties: true,
-  },
-};
-${contents}`
+      contents.replace(
+        'setupZoneTestEnv();',
+        `setupZoneTestEnv({
+  errorOnUnknownElements: true,
+  errorOnUnknownProperties: true
+});`
+      )
     );
   }
 }

packages/jest/src/generators/configuration/configuration.spec.ts

@@ -55,7 +55,9 @@ describe('jestProject', () => {
     } as JestProjectSchema);
     expect(tree.read('libs/lib1/src/test-setup.ts', 'utf-8'))
       .toMatchInlineSnapshot(`
-      "import 'jest-preset-angular/setup-jest';
+      "import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+      setupZoneTestEnv();
       "
     `);
     expect(tree.exists('libs/lib1/jest.config.ts')).toBeTruthy();

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

@@ -1 +1,3 @@
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
+
+setupZoneTestEnv();