Getting component 'AppComponent' is not resolved

[skyleguy]

🐛 Bug Report

I am trying to use the @microsoft/mgt libraries in my default angular 12 project but I have run into several issues with jest and these libraries. I have seen the typical issues with import/export and an error with lit-html (dependency of @microsoft/mgt-components) cannot use import statement outside of a module. I think that i have finally resolved all of these by using transform and transformIgnorePatterns issues but am now facing this issue:

    Component 'AppComponent' is not resolved:
     - templateUrl: ./app.component.html
     - styleUrls: ["./app.component.scss"]
    Did you run and wait for 'resolveComponentResources()'?

To Reproduce

Steps to reproduce the behavior:

1. clone test repo: https://github.com/skyleguy/angular12-jest-mgt-toolkit-example.git
2. run npm i
3. run npm test

Expected behavior

I would expect that the app component specs successfully complete 100%.

Link to repo (highly encouraged)

https://github.com/skyleguy/angular12-jest-mgt-toolkit-example.git

Error log:

# content of error stacktrace :
  ● AppComponent › should create the app

    Component 'AppComponent' is not resolved:
     - templateUrl: ./app.component.html
     - styleUrls: ["./app.component.scss"]
    Did you run and wait for 'resolveComponentResources()'?

      at Function.get (../packages/core/src/render3/jit/directive.ts:82:17)
      at getComponentDef (../packages/core/src/render3/definition.ts:735:14)
      at verifyDeclarationsHaveDefinitions (../packages/core/src/render3/jit/module.ts:242:17)
          at Array.forEach (<anonymous>)
      at verifySemanticsOfNgModuleDef (../packages/core/src/render3/jit/module.ts:212:16)
      at Function.get (../packages/core/src/render3/jit/module.ts:167:13)
      at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.applyProviderOverridesToModule (../packages/core/testing/src/r3_test_bed_compiler.ts:414:49)
      at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.compileTestModule (../packages/core/testing/src/r3_test_bed_compiler.ts:679:10)
      at R3TestBedCompiler.Object.<anonymous>.R3TestBedCompiler.finalize (../packages/core/testing/src/r3_test_bed_compiler.ts:245:10)
      at TestBedRender3.get (../packages/core/testing/src/r3_test_bed.ts:416:43)
      at TestBedRender3.Object.<anonymous>.TestBedRender3.inject (../packages/core/testing/src/r3_test_bed.ts:314:25)
      at TestBedRender3.Object.<anonymous>.TestBedRender3.createComponent (../packages/core/testing/src/r3_test_bed.ts:371:40)
      at Function.Object.<anonymous>.TestBedRender3.createComponent (../packages/core/testing/src/r3_test_bed.ts:190:33)
      at src/app/app.component.spec.ts:14:29

envinfo

node: v14.17.3 npm: 6.14.13

System:
    OS: MacOS 10.15.7

Npm packages:
      "@angular/...": "12.1.2"
     "babel-jest": "^27.0.6",
    "babel-polyfill": "^6.26.0",
    "jest": "^27.0.6",
    "jest-preset-angular": "^9.0.4",
    "typescript": "~4.3.2"

[ahnpnl]

Hi, you have a mistake in your jest config. Starting from v9.0.0, we introduced a Jest transformer which invokes ts-jest so your transform config should be

transform: {
      "^.+\\.(ts|html)$": "jest-preset-angular", // put `jest-preset-angular` instead of `ts-jest`
      "^.+\\.js$": "babel-jest"
},