@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)
  );

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

describe('my tests', () => {
  // Define a scope to auto-clean mocked instance see https://ng-mocks.sudo.eu/api/MockInstance/#scope
  MockInstance.scope();

  beforeEach(async () => {
       // Put expected TestBed conf WITH the broken MockComponent(MyComponent)
       await TestBed.configureTestingModule [...]
       
       // Override the viewChild element with a viewChild-matching-type mock
       // (can be ElementRef as in the previous answer or Component, etc depending on your code)
       MockInstance(MyComponent, 'myViewChild', signal({} as MyViewChildComponent));
  });

  it('my test', () => {
      // test
  });
});

import { CommonModule } from '@angular/common'
import {
    Component,
    Directive,
    contentChild,
    ElementRef,
    viewChild,
} from '@angular/core'
import { MockBuilder, MockInstance, MockRender, ngMocks } from 'ng-mocks'

@Directive({
    selector: '[uiButtonStart]',
    standalone: true,
})
export class ButtonStartDirective {}


@Component({
    selector: 'button[ui-button]',
    template: `
        @if(buttonStart()) {
            <div class="start">
                <ng-content select="[uiButtonStart]" />
            </div>
        }
        <span #buttonText><ng-content></ng-content></span>
    `,
    standalone: true,
    imports: [CommonModule, ButtonStartDirective],
    host: {
        '[attr.title]': 'viewChildProp()?.textContent',
    }
})
export class ButtonComponent  {
    viewChildProp = viewChild<ElementRef>('buttonText')
    buttonStart = contentChild(ButtonStartDirective, { descendants: true })
}

@Component({
    selector: 'button-edit',
    template : `
       <button ui-button>
            <span uiButtonStart>x</span>
            edit
       </button>
    `,
    standalone: true,
    imports: [CommonModule, ButtonComponent, ButtonStartDirective],
})
export class ButtonEditComponent  {}


describe('ButtonEditComponent', () => {
    ngMocks.faster()
    MockInstance.scope()

    beforeAll(() => MockBuilder(ButtonEditComponent)
        .keep(CommonModule)
        .mock(ButtonComponent)
        .mock(ButtonStartDirective)
    )

    it('test', () => {
        const fixture = MockRender(ButtonEditComponent)
        const component = fixture.point.componentInstance
        expect(component).toBeTruthy()
    })
})