Test Error: Unhandled promise rejection when loading custom-app-header.component.html undefined.

[recovery-dev]

I updated angular version 8 to 12. Now, most of the unit tests are breaking with the error above.

Node version: 14.xx
Angular CLI: 12.0.1
ts-jest: v27.1.1
jest-preset-angular: v11.0.1
jest: v27.0.3

jest.config.js file

module.exports = {
    jest: 'jest-preset-angular',
    rootDir: 'src',
    setupfilesAfterEnv: './setupJest.ts',
    testEnvironment: 'jsDom',
    globals: {
       'ts-jest': {
            tsconfig": "<rootDir>/tsconfig.spec.json",
            "stringifyContentPathRegex": "\\.html$",
       }
    },
    transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
      transform: {
        '^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
    },
}

app.component.spec.ts

beforeEach(waitForAsync(() => {
    Testbed.configureTestingModule({
        declration: [TestComponent],
        imports: [SharedModule]
        providers: []
    }.compileComponents()
}

But there is no named file custom-app-header.component.html or app-header.component.scss in the project. In SharedModule, we are using a custom library that was made as a local npm package. And importing all of them in SharedModule.

sharedModule.ts file

import { CustomHeaderModule } from '@customModule';
@NgModule({
    imports: [CustomHeaderModule , ...],
    exports: [ CustomHeaderModule , ...],
})
exports class sharedModule;

It's working well in Angular8 and jest-preset-angular 7.0. but not in angular 12.

I believe this can be solved through the ts-jest module.

Can anyone please advise me?

Thanks in advance!

[ahnpnl]

You can follow the configuration at https://github.com/thymikee/jest-preset-angular/tree/main/examples/example-app-v12

[recovery-dev]

Thank you @ahnpnl for so quick response!
I tried sample implementation in angular12 and am glad the above issue has been solved.
but I'm experiencing one more issue on that test.

Issue:
Importing OverlayModule which does not have a emod property

I can't seem to find OverlayModule in the project. but my best guess is that this module comes from the custom library(local npm library) which is using Angular Material's overlay module(@angular/cdk). I can see some others were experiencing this issue and solved it by using ngcc command. but no luck for me.

May I know if this is something that ts-jest or jest-preset-angular can resolve?
Thank you in advance!

[ahnpnl]

would you please use that example and add a reproducing scenario? It's hard to tell what happens there.

[recovery-dev]

I was able to manage the issue. The issue was in the custom library.
After update library, everything is working well.
Thank you! @ahnpnl