"Expected to be running in 'ProxyZone', but it was not found." with jest

I am migrating an Angular workspace with Karma to an Nx workspace with Jest. I'm having a couple of issues, one of them being the use fakeAsync, which results in the following error:

Expected to be running in 'ProxyZone', but it was not found.


I had to do a bunch of shenanigans to make jest work at all because my app uses @ionic and @ionic-native. I thought the issue was related to said-shenanigans, but I managed to make a kind-of-minimal repro here. Here are the important stuff:

Here is my jest.preset.js.

const nxPreset = require('@nrwl/jest/preset');
module.exports = {
...nxPreset,
testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
transform: {
'^.+\\.(ts|js|html)$': 'ts-jest',
},
testEnvironment: 'jest-environment-jsdom-fourteen',
resolver: '@nrwl/jest/plugins/resolver',
moduleFileExtensions: ['ts', 'js', 'html'],
coverageReporters: ['html'],
};


Here is my jest.config.js.

module.exports = {
preset: '../../jest.preset.js',
coverageDirectory: '../../coverage/apps/products',
snapshotSerializers: [
'jest-preset-angular/build/AngularNoNgAttributesSnapshotSerializer.js',
'jest-preset-angular/build/AngularSnapshotSerializer.js',
'jest-preset-angular/build/HTMLCommentSerializer.js',
],
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
globals: {
'ts-jest': {
tsConfig: '<rootDir>/tsconfig.spec.json',
stringifyContentPathRegex: '\\.(html|svg)$',
astTransformers: {
before: [
'jest-preset-angular/build/InlineFilesTransformer',
'jest-preset-angular/build/StripStylesTransformer',
],
},
},
},
displayName: 'products',
};


Finally, here is my test file.

describe('AppComponent', () => {
let fixture: ComponentFixture<AppComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}).compileComponents();
fixture = TestBed.createComponent(AppComponent);

fixture.detectChanges();
}));

// This test gives me an error.
it('should create the app', fakeAsync(() => {
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));

// This test passes.
it(`should render the header`, () => {
expect(
fixture.nativeElement.querySelector('nx-example-header')
).toBeTruthy();
});
});


Finally, here is the test-setup.ts.

import 'jest-preset-angular';
import 'document-register-element';
import 'zone.js/dist/zone-testing';


This setup seems pretty vanilla to me, I'm not sure on which side the issue is (nx, jest, jest-preset-angular?).

Thanks for your help!

Continue reading...