我尝试为一个独立组件编写一个单元测试，并模拟它的依赖关系。这个独立组件包含以下内容：

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DemoDirectiveDirective } from './demo-directive.directive';

@Component({
  selector: 'app-demo-cmp',
  standalone: true,
  imports: [CommonModule,DemoDirectiveDirective],
  templateUrl: './demo-cmp.component.html',
})
export class DemoCmpComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

并且DemoDirectiveDirective包含以下内容：

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appDemoDirective]',
  standalone: true,
})
export class DemoDirectiveDirective {
  constructor(private hostElement: ElementRef) {
    this.hostElement.nativeElement.innerHTML += 'Update from directive! ';
  }
}

我想像这样测试DemoCmpComponent：

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { DemoCmpComponent } from './demo-cmp.component';

describe('DemoCmpComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [DemoCmpComponent],
    }).compileComponents();
  });

  it('should create', () => {
    const fixture = TestBed.createComponent(DemoCmpComponent);
    fixture.detectChanges();

    expect(fixture.nativeElement.querySelector('p').innerHTML).toBe(
      'demo-cmp works!'
    );
  });
});

由于p标签的内容为Update from directive! demo-cmp works!，因此本测试将失败。
我这里缺少的是模拟DemoDirectiveDirective的步骤，我不知道如何模拟，而且我在Angular页面上找不到任何相关资源。
注意，这只是一个演示测试，一个概念验证。请忽略组件名称和多余的测试。
下面是包含代码的GitHub存储库。