jest-preset-angular: Component is not resolved ... Did you run and wait for 'resolveComponentResources()'?

🐛 Bug Report

To Reproduce

Install the default workspace with a single Angular application using npx create-nx-workspace@latest command.
Updating packages:

"jest": "27.0.4",
"jest-preset-angular": "9.0.3",
"ts-jest": "27.0.3"

Updating the root jest.config.js to:

require('jest-preset-angular/ngcc-jest-processor');

module.exports = {
  projects: ['<rootDir>/apps/test'],
};

Updating the application jest.config.js to:

module.exports = {
  displayName: 'test',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.(html|svg)$'
    }
  },
  coverageDirectory: '../../coverage/apps/test',
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment'
  ]
};

Updating "postinstall": "node ./decorate-angular-cli.js && ngcc" and repeating npm i to generate UMD packages.

Steps to reproduce the behavior:

Run npm run test.

Result:

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

Expected behavior

Correct test processing as with default setting and versions of:

"jest": "26.2.2",
"jest-preset-angular": "8.4.0",
"ts-jest": "26.5.5"

Error log:

nx run test:test 
 FAIL   test  apps/test/src/app/app.component.spec.ts
  AppComponent
    × should create the app (10 ms)
    × should have as title 'test' (2 ms)
    × should render title (1 ms)

  ● 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:677: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:370:43)

envinfo

System:
    OS: Windows 10, NodeJS 14.17.0

Npm packages:
    jest: 27.0.4
    jest-preset-angular: 9.0.3
    typescript: 4.2.4

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 15

Most upvoted comments

this is because Nrwl Nx needs to have migration for Jest config. In root jest-preset.js,

const nxPreset = require('@nrwl/jest/preset');

module.exports = { ...nxPreset };

which refers to node_modules/@nrwl/jest/preset/jest-preset.js, the config should be

module.exports = {
    testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
    resolver: '@nrwl/jest/plugins/resolver',
    moduleFileExtensions: ['ts', 'js', 'html'],
    coverageReporters: ['html'],
  testEnvironment: 'jsdom', <=== Jest 27 default testEnvironment is node
    transform: {
        '^.+\\.(ts|js|html)$': 'jest-preset-angular', <=== breaking change in 9.0.0
    },
};

If you want to use Jest 27, you need to override root jest-preset.js with the config above or wait for Nrwl Nx team to release a new version.

ahnpnl on Jun 8, 2021

@mlc-mlapis do you mind sharing exactly what it was that fixed your issue? I just upgraded out Nx workspace to 12.4.0 (which has the migration that @ahnpnl mentions, ie. testEnvironment: 'jsdom' in the root) but I am getting the same error as you still. This is all the code is

import { async, TestBed } from '@angular/core/testing';
import { FundraiserPageEditorPublishDialogModule } from './fundraiser-page-editor-publish-dialog.module';

describe('FundraiserPageEditorPublishDialogModule', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [FundraiserPageEditorPublishDialogModule],
        }).compileComponents();
    }));

    it('should create', () => {
        expect(FundraiserPageEditorPublishDialogModule).toBeDefined();
    });
});

jest-preset-angular: 9.0.3 jest: 27.0.3 ts-jest: 27.0.3

I tried to override test environment in the projects jest.config.js as well but no dice.

yharaskrik on Jun 23, 2021

+1 the test runs correctly with ng test but fails with jest and it complains for resolving the template

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

it is a fresh angular project created with angular cli

solution: use jest-preset-angular

 {
   testEnvironment: 'jsdom',
   transform: {
      '^.+\\.(ts|js|html)$': 'jest-preset-angular'
   }
};

its-dibo on Sep 29, 2021