ng-mocks is not in JIT mode and cannot resolve declarations

[DzmVasileusky]

ng-mocks is not in JIT mode and cannot resolve declarations

I'm getting this error after did some refactoring on moving some code to external libraries.
What does this error mean and how to fix it?

[satanTime]

Hi @DzmVasileusky,

usually this happens when an app building process imports something from ng-mocks. Normally, it shouldn't happen, because ng-mocks should be used in tests only.

If you get this error during build
search for from 'ng-mocks' or from "ng-mocks" not in spec files, and ensure that these files aren't included in the build process, only for testing.

If you get this error during a test run
then we need to dig here deeper, and try to recreate the issue with a min repo, or if it's fine - you can share access with me so I could analyze the current project and why a declaration doesn't have decorated information.

[DzmVasileusky]

@satanTime Actually I got this error because the component I tried to mock was imported from a wrong directory.
So probably this error also falls on attempts to mock undefined.

[satanTime]

That's interesting, was it a missing file, or a missing export in a file?

I would appreciate if you could post the test file with the import and how it is mocked. Plus the path and the source of the file with the declaration.

Then I can add a better error description for such a case.

Thanks in advance!

[DzmVasileusky]

the component is here @components/shared
but was imported from @features/shared/components so I suppose It was undefined
Of course it would be great to improve an error message in this case but not sure if it is possible

[DzmVasileusky]

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { ActivityDataComponent } from '@features/shared/components'; // this broken import was causing the issue
import { MockDeclarations } from 'ng-mocks';
import { ActivityFeedItemComponent } from './activity-feed-item.component';

describe('ActivityFeedItemComponentTest', () => {

    let component: ActivityFeedItemComponent;
    let fixture: ComponentFixture<ActivityFeedItemComponent>;

    beforeEach(waitForAsync(() => {

        TestBed.configureTestingModule({
            declarations: [
                MockDeclarations(
                    ActivityDataComponent
                ),
                ActivityFeedItemComponent
            ],
            imports: [...],
            providers: [...]
        })
        .compileComponents();

    }));

    afterEach(() => {

        fixture.destroy();

    });

    it('should create', () => {

        expect(component).toBeTruthy();

    });

});

[satanTime]

@DzmVasileusky, thanks! I'll do that.

Happy coding!

[DzmVasileusky]

@satanTime Thank you!

[satanTime]

v11.10.1 has been released and contains a fix for the issue. Feel free to reopen the issue or to submit a new one if you meet any problems.

[satanTime]

If you are here because of the error in your tests:

• try to update ng-mocks to the latest, it works with all Angular versions
• are you using jest.mock('lib/path')? ng-mocks@12.3.1 should have a solution for it, please drop a comment here if it doesn't work for you

I hope it helps. Thanks in advance!

[evgeniyPP]

I had this error because I've accidentally added a pipe as a MockComponents argument

[jkyoutsey]

I have this error after upgrading to Angular 13. I have the latest version of ng-mocks installed (I even deleted node_modules) and re-installed. "ng-mocks": "^12.5.0",
I focused one test that IS NOT USING ng-mocks and I STILL get this error?

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { CommonPipesModule } from '@common/pipes/common-pipes.module';
import { ConfirmationDialogComponent } from '../confirmation-dialog/confirmation-dialog.component';
import { AlertDialogComponent } from './alert-dialog.component';

fdescribe('AlertDialogComponent', () => {
	let component: AlertDialogComponent;
	let fixture: ComponentFixture<AlertDialogComponent>;
	let resultHandler;

	const setupTestBed = async (dialogDataValue: {
		title?: string;
		contentHtml?: string;
		resultHandler: jasmine.Spy;
	}) => {
		await TestBed.configureTestingModule({
			imports: [NoopAnimationsModule, MatDialogModule, MatButtonModule, CommonPipesModule],
			declarations: [AlertDialogComponent],
			providers: [
				{
					provide: MatDialogRef,
					useValue: {
						close: (dialogResult: any) => {}
					}
				},
				{
					provide: MAT_DIALOG_DATA,
					useValue: dialogDataValue
				}
			]
		}).compileComponents();
	};

	describe(' - Defaults', () => {
		beforeEach(async () => {
			resultHandler = jasmine.createSpy();
			await setupTestBed({ resultHandler });
		});

		beforeEach(() => {
			fixture = TestBed.createComponent(AlertDialogComponent);
			component = fixture.componentInstance;
			fixture.detectChanges();
		});

		it('should create', () => {
			// expectations...
		});
	});
});

Error: AlertDialogComponent declaration has been passed into ng-mocks without Angular decorators. Therefore, it cannot be properly handled. Highly likely,  ng-mocks is not in JIT mode. Otherwise, please create an issue on github: https://github.com/ike18t/ng-mocks/issues/new?title=False%20positive%20ng-mocks%20not%20in%20JIT. Thank you in advance for support.
            at node_modules/ng-mocks/cjs/lib/common/error.missing-decorators.js:5:1
            at exports.default (node_modules/ng-mocks/cjs/lib/common/core.reflect.body-catch.js:16:1)
            at node_modules/ng-mocks/cjs/lib/common/core.reflect.directive-resolve.js:11:113
            at node_modules/ng-mocks/cjs/lib/common/core.reflect.meta.js:11:1
            at generateTouches (node_modules/ng-mocks/cjs/lib/common/ng-mocks-global-overrides.js:136:1)
            at defineTouches (node_modules/ng-mocks/cjs/lib/common/ng-mocks-global-overrides.js:169:1)
            at Function.<anonymous> (node_modules/ng-mocks/cjs/lib/common/ng-mocks-global-overrides.js:257:1)
            at Function.<anonymous> (node_modules/ng-mocks/cjs/lib/mock-helper/mock-helper.faster-install.js:43:1)
            at src/app/common/alert-dialog/alert-dialog.component.spec.ts:19:9
            at Generator.next (<anonymous>)

[vorant94]

I am also having the issue @jkyoutsey mentioned in the exact same use-case

you can find example project here with the result either in GitHub actions or just by downloading it and running yarn run test

[DarkSky981]

Just updatet my Project to Angular 13 and iam facing the same Issue as @jkyoutsey.

[pascal-puetz]

Same issue here. We do use @ngneat/spectator though but I did a rewrite on one Test to only use TestBed and got the same result. Since @vorant94 already shared a repo that reproduces the error, I'll not try to extract ours (though I could if that would help you further in any way).

[chathurasudarsha]

same issue here also.

[tlorenz9]

I have experienced the same issue. For testing I created a new angular 13 project, installed ng-mocks, changed the generated app-component test to use ng-mocks (MockBuilder and MockRender) and it has the same issue.

[miwaniak]

same issue

[Ismaestro]

@satanTime can you reopen this please? any updates? Same error here with Angular 13.

[satanTime]

Hi all, this is the issue to follow: #1427

[FrancescoBorzi]

confirmed

[winnemucca]

I just upgraded to ng-mocks 13 today. Thanks for getting it out soon. Unfortunately, still getting the same error with angular 13 and node 16.

[satanTime]

Hi @winnemucca, thank you for reporting that.

Might you post an example of failing test?

[winnemucca]

@satanTime unfortunately, I am not allowed to post code/tests from our code base. Here is the error message
MatButtonModule declaration has been passed into ng-mocks without Angular decorators. Therefore, it cannot be properly handled. Highly likely, jest.mock() has been used on its file, or ng-mocks is not in JIT mode.

[satanTime]

@winnemucca,

Understood. Might you paste here angular version, material version and jest / jasmine version?

If you are using best - might you confirm that imports aren't mocked by jest, and without MockModule, the failing test works well?

[winnemucca]

"jest": "27.2.3
"@angular/material": "13.1.3",
"@angular/core": "13.1.3",

I had the declaration mocked. The file was not using MockModule. I changed to try mockModule. I am still getting the same error message.

[satanTime]

Ah, I see. If the declaration has been mocked my jest imports, then it doesn't contain angular decorators anymore and cannot be mocked by ng-mocks.

The right way here is either to import the original module and to useMockModule or to import its mock and skip ng-mocks usage.

[satanTime]

Hi @winnemucca, were you able to check whether removal of jest.mock() solves the issue?

[vmnog]

I got this error after upgrading my project from angular @12.2.16 to @13.2.4. However I was getting the exact same error:

MyComponent declaration has been passed into ng-mocks without Angular decorators. Therefore, it cannot be properly handled. Highly likely, jest.mock() has been used on its file, or ng-mocks is not in JIT mode

My project versions:

• ng-mocks: 12.5.1
• @angular/core: 13.2.4

After trying a lot of possible solutions a could solve my problem just reinstalling ng-mocks with the latest version and everything got fixed up and all tests were passing successfully.

Update ng-mocks to the latest version with:

$ npm uninstall ng-mocks
$ npm install ng-mocks@latest --save-dev

Good lucky, hope this help someone else.

[Skauyedauty]

@satanTime I apologize. I should have gotten back to you sooner. Switched projects, but our issue boiled down to the spectator library. Version 13 solved problems. Spectator was still an existing issue.

[satanTime]

Hi @Skauyedauty, thanks for the update!

Please let me know, If you have more feedback and would like to discuss improvements of ng-mocks. I'm always open to discuss things which can make our developers' live easier :)

[satanTime]

I'm going to close this issue again.

@winnemucca, could you try with the latest ng-mocks (currently 13.1.0), and let me know in the comments below whether it works for you.

Thank you in advance.

[rbirkgit]

I updated our app to angular 13 and get this error on our tests with ng-mocks 12.5. Tried updating to ng-mocks 13.2 but then browser/tests hangs (using cpu) after compile and before first test. Removing usage of ng-mocks all working.

With Angular 12 and ng-mocks 12.2 all was working fine.

[satanTime]

Hi @rbirkgit,

Thanks for the info. I'll comment in a different issue. This one is correct. For angular 13, you need ng-mocks 13.