ng-mocks: Bug: ngMocks.findInstance unable to find instance (Angular 17)

Description of the bug

It look’s like something has changed in recently released Angular 17. In some test cases ngMocks.findInstance is unable to find instance (Standalone). ngMocks.findInstance(TestComponent);

TypeError: Cannot read properties of null (reading ‘rootNodes’) at Ft (node_modules/ng-mocks/index.mjs:1:69900) at node_modules/ng-mocks/index.mjs:1:70211 at Gt (node_modules/ng-mocks/index.mjs:1:70279) at Wt (node_modules/ng-mocks/index.mjs:1:70594) at Qt (node_modules/ng-mocks/index.mjs:1:71245) at Qt (node_modules/ng-mocks/index.mjs:1:71254) at Qt (node_modules/ng-mocks/index.mjs:1:71254) at Qt (node_modules/ng-mocks/index.mjs:1:71254) at Qt (node_modules/ng-mocks/index.mjs:1:71254) at Qt (node_modules/ng-mocks/index.mjs:1:71254)

All failing test cases has been setup by using MockBuilder. All test cases (~4000) were fine before updating to Angular 17.

I’ve mainly used an alternative method to find instances.
function get(fixture: ComponentFixture<any>, type: Type<any>): any { return fixture?.debugElement?.query(By.directive(type)).componentInstance }

I replaced ngMocks.findInstance with above get-function and it fixed the problem.

An example of the bug

Link:

Expected vs actual behavior

ngMocks.findInstance find an instance without an error.



Angular CLI: 17.0.0
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

Angular: 17.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.1700.0 (cli-only)
@angular-devkit/build-angular              17.0.0
@angular-devkit/core                       17.0.0 (cli-only)
@angular-devkit/schematics                 17.0.0
@angular/cdk                               17.0.0
@angular/cli                               17.0.0
@angular/google-maps                       17.0.0
@angular/material                          17.0.0
@angular/material-date-fns-adapter         17.0.0
@angular/ssr                               17.0.0
@nguniversal/module-map-ngfactory-loader   v8.2.6
@schematics/angular                        17.0.0
rxjs                                       7.8.1
typescript                                 5.2.2
zone.js                                    0.14.2

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 9
Comments: 19 (7 by maintainers)

Commits related to this issue

fix: unable to find instance in case of ng17 control flow ViewContainerRef actually returns the wrong length in case of Angular 17 Control Flow. By checking that the returned value is not null we sho... — committed to andreandersson/ng-mocks by deleted user 3 months ago
fix: unable to find instance in case of ng17 control flow ViewContainerRef actually returns the wrong length in case of Angular 17 Control Flow. By checking that the returned value is not null we sho... — committed to andreandersson/ng-mocks by deleted user 3 months ago
fix: unable to find instance in case of ng17 control flow ViewContainerRef actually returns the wrong length in case of Angular 17 Control Flow. By checking that the returned value is not null we sho... — committed to andreandersson/ng-mocks by deleted user 3 months ago
fix: unable to find instance in case of ng17 control flow ViewContainerRef actually returns the wrong length in case of Angular 17 Control Flow. By checking that the returned value is not null we sho... — committed to andreandersson/ng-mocks by deleted user 3 months ago

Most upvoted comments

Hi @GipHub123,

thanks for reporting. I’ll do my best to fix it asap. However, currently, my availability is very limited.

satanTime on Nov 9, 2023

@satanTime, thank you very much. I can confirm that the issue is fixed for us as well. We highly appreciate the effort.

LukasMachetanz on Apr 16, 2024

v14.12.2 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 on Apr 13, 2024

Hi all, all issues are in my todo, but not much time to work on the lib recently. Hopefully, in a couple of weeks, I’ll be back on track and can dedicate more time on open source.

Feel free to contribute and fix some issues, open source is fun and it’s always right time to join.

satanTime on Apr 3, 2024

Using the mentioned workaround in the failing cases to unblock updates should be good enough until this is resolved. I added these functions in our testing library and use them whenever ngMocks fails:

/**
 * @example
 * findDirective(fixture, MyComponent).valueChange.emit(123);
 */
export const findDirective = <T, D>(fixture: ComponentFixture<T>, directive: Type<D>) =>
  fixture.debugElement.query(By.directive(directive)).componentInstance as D;

/**
 * @example
 * findDirectives(fixture, MyComponent)[0].valueChange.emit(123);
 */
export const findDirectives = <T, D>(fixture: ComponentFixture<T>, directive: Type<D>) =>
  fixture.debugElement.queryAll(By.directive(directive)).map((ii) => ii.componentInstance as D);

rlexa on Feb 26, 2024

First of all I have to apologise for being impatient, but this bug is a definite blocker using ng-mocks together with Angular’s new control-flow syntax.

LukasMachetanz on Feb 15, 2024