Upgrade to angular 10 failing

[LanderBeeuwsaert]

🐛 Bug Report

When upgrading to angular 10, with all the latest libraries in package.json, with node 12, 13 and 14; and also after remaking the project so that it's the same as this example: https://github.com/ahnpnl/jest-angular ; we still get:

Error: Uncaught [TypeError: A dynamic import callback was not specified.] at reportException (C:\Users\Rubenn\AC\acro-companion\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:62:24) at Timeout.task [as _onTimeout] (C:\Users\Rubenn\AC\acro-companion\node_modules\jest-environment-jsdom\node_modules\jsdom\lib\jsdom\browser\Window.js:396:9) at listOnTimeout (internal/timers.js:551:17) at processTimers (internal/timers.js:494:7) TypeError [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING]: A dynamic import callback was not specified. at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:31:9) at C:\Users\Rubenn\AC\acro-companion\node_modules\src\auth\auth.ts:58:52 at ZoneDelegate.invoke (C:\Users\Rubenn\AC\acro-companion\node_modules\zone.js\dist\zone.js:386:30) at ProxyZoneSpec.onInvoke (C:\Users\Rubenn\AC\acro-companion\node_modules\zone.js\dist\proxy.js:117:43) at ZoneDelegate.invoke (C:\Users\Rubenn\AC\acro-companion\node_modules\zone.js\dist\zone.js:385:36) at Zone.run (C:\Users\Rubenn\AC\acro-companion\node_modules\zone.js\dist\zone.js:143:47) at NgZone.runOutsideAngular (C:\Users\Rubenn\AC\packages\core\src\zone\ng_zone.ts:227:50) at SwitchMapSubscriber.project (C:\Users\Rubenn\AC\acro-companion\node_modules\src\auth\auth.ts:58:28) at SwitchMapSubscriber._next (C:\Users\Rubenn\AC\acro-companion\node_modules\rxjs\src\internal\operators\switchMap.ts:123:21) at SwitchMapSubscriber.Subscriber.next (C:\Users\Rubenn\AC\acro-companion\node_modules\rxjs\src\internal\Subscriber.ts:99:12) { code: 'ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING' }

The jest team asked to post this here (see ticket with them:
jestjs/jest#10251 (comment) )

It only seems to happen if our beforeEach() method has asynchronous code:

`
beforeEach(() => {
ed = TestBed.inject(ExerciseData);

if (!ed.exerciseModel) {
  const auth: Authentication = TestBed.inject(Authentication);
  return auth.signInWithEmailAndPassword(normalUserEmail, normalUserPass).then(_ => {

`

We've been searching for quite some time but don't find the reason. Probably we're overlooking something but we don't seem to find it. Any ideas?

envinfo

System:
    OS: Windows 10, node 12, 13, 14 ; webstorm & vs code.

    "jest-createspyobj": "1.2.2",
    "jest-junit": "10.0.0",
    "jest": "^26.1.0",
    "jest-preset-angular": "^8.2.1",
    "ts-jest": "^26.1.3",
    "typescript": "3.9.6",

[ahnpnl]

Hi, do you have the example of your test ?

[LanderBeeuwsaert]

I presume you mean the test file, see below, it fails on the line with the return (we used to have a async there; and changed it to then to see if it would solve it, but it didn't.
If you want I can also give the tsconfig files and so on.
Sorry for the formatting, github is flipping out on some of the characters.

describe('Test Dynamic Calculation', () => {
const resetTestingModule = TestBed.resetTestingModule,
preventAngularFromResetting = () => (TestBed.resetTestingModule = () => TestBed);

beforeAll(async(async () => {
resetTestingModule();
preventAngularFromResetting();

TestBed.configureTestingModule({
  imports: [
    RouterTestingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    HttpClientModule,
    MatDialogModule,
    MatTabsModule,
    MatButtonToggleModule,
    FormsModule,
    MatTooltipModule,
    MatSlideToggleModule,
    MatIconModule,
    // BaseModule,
    // AppModule,
    // AfterLoginModule
  ],
  declarations: [
    DynamicSelector,
    // TabgroupNavigatorComponent,
    // DraggableDialogHandleComponent

    // {provide: DraggableDialogHandleComponent, useValue: {}},
    // {provide: NotificationCenterComponent, useValue: {}},
  ],
  providers: [
    FirestoreService,
    Authentication,
    Helpers,
    // Communication,
    SheetService,
    MapToIterable,
    DoubleLandingCalculatorService,
    // SheetUpgradeService,
    // UserService,
    // LoadingOverlayService,
    // RTJAcroCommunication,
    // ManagerService,
    // RTJAcroLoadingControllersService,
    // RTJAcroPanelControllerService,
    // RTJAcroSheetControllerService,
    // RTJAcroDjGroupControllerService,
    // RTJAcroDjPersoControllerService,
    // RTJAcroCJPControllerService,
    // RTJAcroEjControllerService,
    // RTJAcroAjControllerService,
    // PanelService,
    // OrganisationService,
    // OrganisationRightService,
    // UserRightService,
    // CoachService,
    // {provide: SheetService, useValue: {}},
    {
      provide: MatDialogRef,
      useValue: {
        close(): void {},
      },
    },
    // {provide: Authentication, useValue: {}},
    { provide: Communication, useValue: {} },
    { provide: UserService, useValue: {} },
    { provide: LoadingOverlayService, useValue: {} },
    {
      provide: RTJAcroCommunication,
      useValue: {
        judgeObserverRole: 'nonexistant',
      },
    },
    { provide: SheetUpgradeService, useValue: {} },
    // {provide: ManagerService, useValue: {}},
    // {provide: PanelService, useValue: {}},
    // {provide: OrganisationService, useValue: {}},
    // {provide: OrganisationRightService, useValue: {}},
    // {provide: UserRightService, useValue: {}},
    // {provide: CoachService, useValue: {}},
    // {provide: TeamService, useValue: {}},
    { provide: CompulsoryCalculatorService, useValue: {} },
    { provide: IndividualCalculatorService, useValue: {} },
    { provide: PairStaticCalculatorService, useValue: {} },
    { provide: PairMountCalculatorService, useValue: {} },
    { provide: GroupMountCalculatorService, useValue: {} },
    // {provide: GroupStaticCalculatorService, useValue: {}},
    GroupStaticCalculatorService,
    { provide: SpecialRequirementsDataService, useValue: {} },
    { provide: NatIndividualCalculatorService, useValue: {} },

    DynamicCalculatorService,
    ExerciseData,
    SecureLocalStorage,
    CustomErrorHandler,
    CalculationUtilService,
  ],
  schemas: [NO_ERRORS_SCHEMA],
});
await TestBed.compileComponents();
(<any>window).ga = jasmine.createSpy('ga');

}));

afterAll(() => resetTestingModule());

beforeEach(() => {
//we need the ExerciseData for calculations, this means we need to login to firebase with any user and get the data, and push this data in the ed.exerciseModel

ed = TestBed.inject(ExerciseData);

if (!ed.exerciseModel) {
  const auth: Authentication = TestBed.inject(Authentication);
  return auth.signInWithEmailAndPassword(normalUserEmail, normalUserPass).then(_ => {

    return database().ref('/data').once('value').then((result: DataSnapshot) => {
      ed.exerciseModel = result.toJSON();

      sheetService = TestBed.inject(SheetService);
      let dynamicSelectorFixture = TestBed.createComponent(DynamicSelector);
      dynamicSelector = dynamicSelectorFixture.componentInstance;

      sheetService.sheetViewModel = {
        sheetModel: {
          level: 'Seniors',
          program_country: 'FIG',
          category: category,
          exercise: 'Dynamic',
        },
        isViewedFromJudging: true,
      } as SheetViewModel;

      let sheetModel: SheetModel = sheetService.sheetViewModel.sheetModel;
      let aggregation: AggregationModel = new AggregationModel();
      aggregation.setAggregation(sheetModel);
      sheetService.sheetViewModel.aggregation = aggregation;
      sheetService.sheetModel = sheetModel;

      dynamicSelector.dialogData = {
        container: {
          index: 1,
        },
      };
      dynamicSelector.ngOnInit();

      let groupStaticCalculatorService = TestBed.inject(GroupStaticCalculatorService);
      groupStaticCalculatorService.sheetService = sheetService;
    });
  });
}

});

let sheetService: SheetService;
let dynamicSelector: DynamicSelector;
let ed: ExerciseData;

//https://docs.google.com/document/d/1zaBOjPAYA0V5W-STklriopgcjXLT3tlcF5B6UBJcpFI/edit#heading=h.kf90avxgw7gv
it('Example 0', () => {
runThroughDynamicSelection(
sheetService.sheetViewModel.aggregation.dynDataPath,
'15_v2',
'FRONT',
'6',
'6',
4,
1,
null,
null,
false,
'ep_p47_g_v1',
null,
false,
false
);

verifyContainerExpected(dynamicSelector.changingModel, '6/4 FR 720°180°', undefined, '38', undefined, undefined, undefined, '47/22G6', undefined);
dynamicSelector.saveAndClose();
return sheetService.executeSummation(true, false).then((newSheetValues: Partial<SheetModel>) => {
  verifySheetExpected(newSheetValues, '0', '38', '0', '38', '0.380');
});

});

[ahnpnl]

Oops this is quite a big test file. Is it possible for you to create a small similar example ?

In general, look at the stack trace look like there is something goes wrong with async test.

[LanderBeeuwsaert]

I stripped it out as far as I could. it fails on the async function to firebase:

import { async, TestBed } from '@angular/core/testing';
import { AngularFireModule } from '@angular/fire';
import { environment } from '../../../src/environments/environment';
import { Authentication } from '../../../src/app/core/services/authentication.service';
import { FirestoreService } from '../../../src/app/core/services/firestore-service';
import { MatDialogModule } from '@angular/material/dialog';
import { database } from 'firebase';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import DataSnapshot = firebase.database.DataSnapshot;

describe('Test Dynamic Calculation', () => {
const resetTestingModule = TestBed.resetTestingModule,
preventAngularFromResetting = () => (TestBed.resetTestingModule = () => TestBed);

beforeAll(async(async () => {
resetTestingModule();
preventAngularFromResetting();

TestBed.configureTestingModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    MatDialogModule,
  ],
  declarations: [
  ],
  providers: [
    FirestoreService,
    Authentication,
  ],
  schemas: [NO_ERRORS_SCHEMA],
});
await TestBed.compileComponents();

}));

afterAll(() => resetTestingModule());

beforeEach(async () => {
//we need to inject something it seems otherwise firebase complains the app has not been initialized
ed = TestBed.inject(FirestoreService);

let result: DataSnapshot = await database().ref('/data').once('value');

});
let ed: FirestoreService;

it('Example 0', () => {

});
});
Does this give more ideas?

[ahnpnl]

If you put async code in it, does it throw the same error ?

[LanderBeeuwsaert]

Sooo, update: yes, the call gives issues in the 'it' and in the 'beforeAll' as well.
Also firebase Authentication and firebase Functions does weird stuff.

And an await to something else works:
let http = TestBed.inject(HttpClient);
let locationObject: IpInfoModel = (await http.get('https://ipinfo.io/json?token=zzzzzzzzzzzzzz').toPromise()) as IpInfoModel;

So it seems to be related to something that changed during the update for Firebase/AngularFire?

[ahnpnl]

Hmm I suspect so, the [ERR_VM_DYNAMIC_IMPORT_CALLBACK_MISSING] is a nodejs error, and isn’t related to the preset.

The acro-companion\node_modules\src\auth\auth.ts:58:52 is quite suspected though, is this from Firebase/AngularFire ?

[LanderBeeuwsaert]

Yep, it's from firebase.
But I found it, when upgrading AngularFire from 6.0.0 to 6.0.2 it breaks. So something changed at that time.
Thanks for all the help!!