NX 11 -> 12 Migration issue: zone-testing.js is needed for the fakeAsync()

Current Behavior

After migrating a NX 11 (exclusively Angular) repo to 12, I’m getting the following error when running the Jest unit tests:

    zone-testing.js is needed for the fakeAsync() test helper but could not be found.
            Please make sure that your environment includes zone.js/testing

I noticed that polyfills.ts was updated during migration, changing the zone.js import statement. So, I changed back that line and tried as well. But the same error persisted. I also tried adding import "zone.js/tsting" without any luck.

Expected Behavior

Unit tests to execute without an error.

Steps to Reproduce

Migrate a NX 11 repo with nx migrate latest.

Failure Logs

    zone-testing.js is needed for the fakeAsync() test helper but could not be found.
            Please make sure that your environment includes zone.js/testing

      at resetFakeAsyncZone (../../../packages/core/testing/src/fake_async.ts:25:9)
      at Object.<anonymous> (../../../packages/core/testing/src/test_hooks.ts:39:7)

Environment

NX Report complete - copy this into the issue template

Node : 12.14.1 OS : darwin x64 npm : 7.19.1

nx : 11.1.5 @nrwl/angular : 12.5.8 @nrwl/cli : 12.5.8 @nrwl/cypress : 12.5.8 @nrwl/devkit : 12.5.8 @nrwl/eslint-plugin-nx : 12.5.8 @nrwl/express : Not Found @nrwl/jest : 12.5.8 @nrwl/linter : 12.5.8 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/nx-cloud : 12.2.7 @nrwl/react : Not Found @nrwl/schematics : Not Found @nrwl/tao : 12.5.8 @nrwl/web : Not Found @nrwl/workspace : 12.5.8 @nrwl/storybook : 12.5.8 @nrwl/gatsby : Not Found typescript : 4.2.4

[bridzius]

For people who actually need the environment teardown override - import 'jest-preset-angular/setup-jest'; has to be imported before the other @angular imports for the setup to happen correctly. So:

import 'jest-preset-angular/setup-jest';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';

getTestBed().resetTestEnvironment();
getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
  teardown: { destroyAfterEach: false },
});

[antoineviscardi]

Any tipps how this workaround works with organize imports feature of vscode?

Assuming you use Prettier, the best solution we found in our repo is to rely on Trivago’s plugin. It is quite a bit more configurable than the VSCode feature. It also has the advantage of working regardless of the IDE.

The plugin allows you to set an import order based on regex patterns in your .prettierrc file. Somthing like the following would insure the jest-preset-angular/setup-jest import is always before any other third party module.

  "importOrder": [
    "reflect-metadata",
    "dotenv/config",
    "jest-preset-angular/setup-jest",
    "<THIRD_PARTY_MODULES>",
    "^@MyCompany/shared/(.*)$",
    "^@MyCompany/(.*)$",
    "^[./]"
  ],