Bug: MockModule, NgFor and @happy-dom/jest-environment

[Yberion]

Description of the bug

Hello, it seems that when using NgFor instead of CommonModule (because I only use *ngFor), it does not work with Jest and testEnvironment: '@happy-dom/jest-environment',.

It works fine if I use CommonModule or if I use jsdom.

It does the following error:

TypeError: Class constructor CommonModule cannot be invoked without 'new'

      at new MockOfCommonModule (node_modules/ng-mocks/index.js:1:15515)
      at Object.MockOfCommonModule_Factory [as useFactory] (ng:\MockOfCommonModule\ɵfac.js:5:10)
      at Object.factory (node_modules/@angular/core/fesm2020/core.mjs:8118:38)
      at R3Injector.hydrate (node_modules/@angular/core/fesm2020/core.mjs:8031:35)
      at R3Injector.get (node_modules/@angular/core/fesm2020/core.mjs:7919:33)
      at R3Injector.<anonymous> (node_modules/ng-mocks/webpack:/ng-mocks/libs/ng-mocks/src/lib/common/ng-mocks-global-overrides.ts:371:53)
      at R3Injector.this (node_modules/ng-mocks/webpack:/ng-mocks/libs/ng-mocks/src/lib/mock-service/helper.create-clone.ts:10:65)
      at injectInjectorOnly (node_modules/@angular/core/fesm2020/core.mjs:633:33)
      at ɵɵinject (node_modules/@angular/core/fesm2020/core.mjs:637:42)
      at useValue (node_modules/@angular/core/fesm2020/core.mjs:7713:65)
      at R3Injector.resolveInjectorInitializers (node_modules/@angular/core/fesm2020/core.mjs:7968:17)
      at new NgModuleRef (node_modules/@angular/core/fesm2020/core.mjs:19817:26)
      at TestBedCompiler.finalize (node_modules/@angular/core/fesm2020/testing.mjs:23331:30)
      at TestBedImpl.get testModuleRef [as testModuleRef] (node_modules/@angular/core/fesm2020/testing.mjs:24294:49)
      at TestBedImpl.inject (node_modules/@angular/core/fesm2020/testing.mjs:24205:29)
      at TestBedImpl.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:24257:44)
      at Function.createComponent (node_modules/@angular/core/fesm2020/testing.mjs:24079:37)
      at Function.fixture (node_modules/ng-mocks/webpack:/ng-mocks/libs/ng-mocks/src/lib/common/ng-mocks-global-overrides.ts:311:19)
      at src/app/app.component.spec.ts:17:29
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:412:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3833:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:411:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
      at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4333:34)

Maybe I should create a ticket on happy-dom? (I don't have any information to give for now as I don't know what's the cause)

An example of the bug

NgFor is in MyComponentModule which is imported in the test of AppComponent.

• https://github.com/Yberion/ng-mocks-ngfor
• npm run test

You can test that it works without testEnvironment: '@happy-dom/jest-environment', by removing the line in jest.config.js.

Expected vs actual behavior

No error, working as if we're using CommonModule.

[satanTime]

Hi, you didn't install ng-mocks correctly: https://ng-mocks.sudo.eu/extra/install

ngMocks.globalKeep(ApplicationModule, true);
ngMocks.globalKeep(CommonModule, true);
ngMocks.globalKeep(BrowserModule, true);

this part is missing.

[Yberion]

Hello, I didn't know we had to do that, thanks for the info. It's kinda strange that it works fine with jsdom without this config but does not work with happy-dom.

Thanks for that lib btw, it's awesome!

[satanTime]

Ah, I see. I had the same suspicion, because the test which is failing in your project has passed on my CI.

Then the issue here is, that happy-dom disabled eval. I couldn't find a way how to extend es6 class with es5 (commonjs) code without using class and extend: https://github.com/help-me-mom/ng-mocks/blob/master/libs/ng-mocks/src/lib/common/core.helpers.ts#L124-L129

The issue it solves: "Class constructor CommonModule cannot be invoked without 'new'" when es5 version of ng-mocks has received es6 class.

I'll play around to see how happy-dom manages global variables, and/or search again how to extend es6 class without class and extends words in es5.
Feel free to post here any useful links / info.

[satanTime]

This is the issue: microsoft/TypeScript#17088

[satanTime]

This is why:

    SyntaxError: Identifier 'MockMiddleware' has already been declared
        at Script.runInContext (node:vm:141:12)
        at Object.runInContext (node:vm:291:6)
        at Window.eval (/Users/michael/Downloads/temp/ng-mocks-ngfor/node_modules/happy-dom/src/window/Window.ts:584:14)

eval('class MockMiddleware {};');
eval('class MockMiddleware {};');

working on a fix.

[satanTime]

If you want, you can open an issue in happy-dom:

this is what works in javascript: https://stackblitz.com/edit/js-gvfp3d?file=index.js
but fails in their implementation.

[Yberion]

Hello, thanks for your reactivity, this is well appreciated!

Thanks for the fix, I'm glad you found what was the cause, I will make a ticket on happy-dom.

[satanTime]

v14.10.0 has been released and contains a fix for the issue. Feel free to reopen the issue or to submit a new one if you meet any problems.

[Yberion]

Awesome, thanks for the release.

It seems to works fine, no problem so far for now!

[satanTime]

Glad to hear! Stay in touch!