Bug: Incompatibility of MockComponent with new viewChild signal function

[mh-ahs]

Description of the bug

Testing standalone components with nested components that use the new viewChild signal feature is currently not possible if the nested component should be mocked.

I'm not sure if ngMocks can do anything about it or if its an angular-core related problem.

An example of the bug

Link: https://stackblitz.com/edit/github-6eneyd?file=src%2Ftest.spec.ts
I added a "NestedComponent" to the default example and replaced the module-based definitions with a simple standalone definition.

Expected vs actual behavior

Using the Signal implementation leads to
TypeError: Cannot read properties of undefined (reading 'Symbol(SIGNAL)')
Switching the implementation from Signal to Decorator lets test run fine,

[GipHub123]

I can confirm this one 👍 Having same problems after the change.

[c-harding]

Temporary workaround: use MockBuilder#replace

@Component({
  selector: 'app-nested',
  standalone: true,
  template: ``,
})
class NestedComponentStub {
  public readonly anchor = signal(new ElementRef(undefined)).asReadonly();
  public readonly name = input.required<string>();
}

describe('my sandbox', () => {
  beforeEach(() =>
    MockBuilder(TargetComponent).replace(NestedComponent, NestedComponentStub)
  );

[c-harding]

@satanTime this seems to be a better fix: simply remove the view queries, as they’ll always be null anyway

ng-mocks/libs/ng-mocks/src/lib/common/decorate.queries.ts

Lines 22 to 39 in 282cbf0

	const generateFinalQueries = (queries: {
	[key: string]: Query;
	}): [Array<[string, Query & { ngMetadataName?: string }]>, string[]] => {
	const final: Array<[string, Query & { ngMetadataName?: string }]> = [];
	const scanKeys: string[] = [];
	for (const key of Object.keys(queries)) {
	const query: Query & { ngMetadataName?: string } = queries[key];
	final.push([key, query]);
	if (!query.isViewQuery && !isInternalKey(key)) {
	scanKeys.push(key);
	final.push([`__ngMocksVcr_${key}`, cloneVcrQuery(query)]);
	}
	}
	return [final, scanKeys];
	};

  const generateFinalQueries = (queries: { 
    [key: string]: Query; 
  }): [Array<[string, Query & { ngMetadataName?: string }]>, string[]] => { 
    const final: Array<[string, Query & { ngMetadataName?: string }]> = []; 
    const scanKeys: string[] = []; 
   
    for (const key of Object.keys(queries)) { 
      const query: Query & { ngMetadataName?: string } = queries[key]; 
-     final.push([key, query]); 
   
      if (!query.isViewQuery && !isInternalKey(key)) { 
+       final.push([key, query]);
        scanKeys.push(key); 
        final.push([`__ngMocksVcr_${key}`, cloneVcrQuery(query)]); 
      } 
    } 
   
    return [final, scanKeys]; 
  }; 

[andreandersson]

This will be fixed by the same fix as #7976, is my guess.

[renanaragao]

Good evening, any news?

[mishahrokhola]

Hello, any updates on this issue?

[LukasMachetanz]

I guess #8895 is a similar problem.

[LukasMachetanz]

Any news on this issue? This bug really prevents using the new API.

[SereetsiKC]

The fix here is not to mock the component but pass it into your test declarations with you parent component

[satanTime]

Sorry for the delay. I'll take a look closer next week.

[LukasMachetanz]

@satanTime, did you already have a chance to look into it?

[pcbowers]

Another workaround I found until this is fixed:

MockInstance(YourComponent, 'viewChildElement', signal(new ElementRef(document.createElement('div'))));