Angular单元测试弹窗成功打开但MatDialogHarness找不到元素报错

1. Angular Material的MatDialog默认渲染位置是全局<body>节点下，不属于被测组件HostComponent对应的fixture DOM子树。你初始化的HarnessLoader是绑定到fixture的，仅能查询fixture内部的元素，无法命中全局挂载的dialog元素。
2. 测试用例混用了fakeAsync和async修饰符，会导致时序判断异常，也是查询失败的常见诱因。
3. 你提供的测试代码存在笔误：配置测试模块后createComponent传入的是WidgetGroupConfigComponent，和你要测试的HostComponent不一致，若为实际业务代码的笔误需要先修正。

第一步：替换为全局根级别HarnessLoader #

将beforeEach中loader的初始化逻辑改为使用documentRootLoader，支持查询整个页面的DOM元素：

// 原来的写法
// loader = TestbedHarnessEnvironment.loader(fixture);
// 替换为
loader = TestbedHarnessEnvironment.documentRootLoader(fixture);

第二步：修正测试用例的异步逻辑 #

移除fakeAsync修饰符，统一使用async/await异步模式，避免时序冲突：

it('Opens the dialog when button is clicked', async () => {
    const testButton = buttonWithText('TestTimberDevice01')!;
    expect(testButton).toBeDefined(); // passes

    testButton.click();
    fixture.detectChanges();
    await fixture.whenStable(); // 等待所有异步操作执行完成

    const dialog = await loader.getHarness(MatDialogHarness);
    expect(dialog).toBeDefined();
});

如果要保留fakeAsync写法，就去掉async修饰符，不要混用两种异步控制方式：

it('Opens the dialog when button is clicked', fakeAsync(() => {
    const testButton = buttonWithText('TestTimberDevice01')!;
    expect(testButton).toBeDefined(); // passes

    testButton.click();
    tick();
    fixture.detectChanges();

    // fakeAsync模式下用getHarnessOrNull同步查询即可
    const dialog = loader.getHarnessOrNull(MatDialogHarness);
    expect(dialog).toBeDefined();
}));

如果不想让dialog挂载到全局body，可以在调用dialog.open的时候指定viewContainerRef参数，将dialog挂载到被测组件内部，这样原来的fixture绑定的loader也可以查询到：

// 组件内打开dialog的逻辑增加配置
constructor(private dialog: MatDialog, private viewContainerRef: ViewContainerRef) {}

openDialog() {
    this.dialog.open(MyTestDialogComponent, {
        viewContainerRef: this.viewContainerRef
    });
}

内容的提问来源于stack exchange，提问作者dinika saxena