[Bug]: Error while using Material mixins with angular 11

[Granipouss]

Version

12.2.2

Steps to reproduce

See https://github.com/Granipouss/jest-angular-11-issue for minimal repo

• Create a angular 11 project
• Add jest and this preset
• Use a material mixin (I tried tabIndex and errorState)
• Run the tests

Expected behavior

The test should pass.

Actual behavior

Determining test suites to run...
ngcc-jest-processor: running ngcc
ts-jest[versions] (WARN) Version 4.1.6 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=4.3.0 <5.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.
 FAIL  src/app/app.component.spec.ts
  AppComponent
    ✕ should create the app (58 ms)

  ● AppComponent › should create the app

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

      at new Mixin (../src/material/core/common-behaviors/tabindex.ts:41:5)
      at new TestComponent (src/app/test.component.ts:14:27)
      at NodeInjectorFactory.TestComponent_Factory [as factory] (ng:/TestComponent/ɵfac.js:5:10)
      at getNodeInjectable (../packages/core/src/render3/di.ts:613:38)
      at instantiateAllDirectives (../packages/core/src/render3/instructions/shared.ts:1307:23)
      at createDirectivesInstances (../packages/core/src/render3/instructions/shared.ts:550:3)
      at ɵɵelementStart (../packages/core/src/render3/instructions/element.ts:121:5)
      at ɵɵelement (../packages/core/src/render3/instructions/element.ts:180:3)
      at AppComponent_Template (ng:/AppComponent.js:10:9)
      at executeTemplate (../packages/core/src/render3/instructions/shared.ts:517:5)
      at renderView (../packages/core/src/render3/instructions/shared.ts:302:7)
      at renderComponent (../packages/core/src/render3/instructions/shared.ts:1775:3)
      at renderChildComponents (../packages/core/src/render3/instructions/shared.ts:123:5)
      at renderView (../packages/core/src/render3/instructions/shared.ts:331:7)
      at ComponentFactory.Object.<anonymous>.ComponentFactory.create (../packages/core/src/render3/component_ref.ts:218:7)
      at initComponent (../packages/core/testing/src/r3_test_bed.ts:355:28)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
      at Object.onInvoke (../packages/core/src/zone/ng_zone.ts:364:29)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:169:47)
      at NgZone.Object.<anonymous>.NgZone.run (../packages/core/src/zone/ng_zone.ts:184:50)
      at TestBedRender3.Object.<anonymous>.TestBedRender3.createComponent (../packages/core/testing/src/r3_test_bed.ts:358:37)
      at Function.Object.<anonymous>.TestBedRender3.createComponent (../packages/core/testing/src/r3_test_bed.ts:182:33)
      at src/app/app.component.spec.ts:15:33
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:409:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3830:43)
      at _ZoneDelegate.Object.<anonymous>._ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:408: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:4330:34)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        2.676 s, estimated 3 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Additional context

I tried adding the mixing to my project (by copy/pasting the code from the source) and it worked, so it seems to be an issue with importing the mixing specifically

Environment

System:
    OS: Linux 5.4 Ubuntu 18.04.6 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.16.1/bin/yarn
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
  npmPackages:
    jest: ^28.0.0 => 28.1.3

[ahnpnl]

We don't support Angular 11 anymore:)

[Granipouss]

What version of the preset should I use ?

[ahnpnl]

For Angular 11, you have to use Jest 27 + v11.x of this preset. However, the bug already occured from that version onwards.