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

[Yberion]

Describe the bug

Hello, I'm using Jest and ng-mocks to test my Angular code and I'm facing an error.
On Angular you have some directives such as *ngFor which can be important through the module CommonModule.

But you can directly important that directive through NgFor.

It happen that when using jsdom and ng-mocks to mock a Module, it works fine, but if I'm using @happy-dom/jest-environment instead of jsdom it does not work anymore.

To Reproduce

You can read more about the problem here (quick read don't worry), it seems to be the implementation done in happy-dom that cause the problem.

• Bug: MockModule, NgFor and @happy-dom/jest-environment help-me-mom/ng-mocks#5465 (comment)

Expected behavior

No error.

Screenshots/errors

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)

Device:

• OS: Windows 11
• Browser: Brave Beta
• Version: 111

[capricorn86]

Thank you for reporting @Yberion! 🙂

I have read through the bug report in ng-mocks, but I have a hard time reproducing this and the repo for reproducing it gives a 404.

Do you have some more info on the issue? Is it caused by ES6 code mixed with ES5 code somehow, or was it a problem with a class being defined globally twice?

[Yberion]

Hello @capricorn86 😃

Indeed sorry, I removed the repo because we though it was something else.

I though the explaination from the ticket would've been enough, maybe @satanTime could help a bit more than I can?

I can make a repro if needed, I think it's not related to Angular but how the implementation is done on happy-dom help-me-mom/ng-mocks#5465 (comment)

[satanTime]

Hi there,

basically, in @happy-dom/jest-environment, you should call:

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

and it fails, whereas it doesn't fail in normal dom.

[capricorn86]

Thank you for the explanation @satanTime!