测试MudBlazor模态组件始终渲染空标记的问题排查

问题根源 #

MudBlazor的<MudDialog>组件不能直接渲染显示，它依赖IDialogService的触发，以及MudDialogProvider提供的上下文环境。直接渲染ModalComplejo组件时，模态框处于未激活状态，因此只会输出空标记。

修正后的测试方案 #

核心修正点 #

• 必须包含MudDialogProvider：它是所有模态框的容器，缺失的话模态组件无法正常渲染。
• 通过DialogService触发显示：调用IDialogService.Show<T>()方法启动模态组件，而非直接渲染组件。
• 修正断言逻辑：原测试的断言内容与实际传入的组件内容完全不符，需要替换为对应实际渲染的标记。

完整修正后的测试代码 #

@code {
    [Fact]
    public void RenderModalComplejo()
    {
        // 注册MudBlazor模态框核心依赖服务
        Services.AddSingleton<MudDialogProvider>();
        Services.AddSingleton<IDialogService, DialogService>();

        // 渲染包含MudDialogProvider的组件树，作为模态框的容器
        var cut = Render(@<MudDialogProvider></MudDialogProvider>);

        // 获取DialogService实例
        var dialogService = Services.GetRequiredService<IDialogService>();

        // 构造ModalComplejo所需的参数（传递RenderFragment类型的属性）
        var parameters = new DialogParameters
        {
            { nameof(ModalComplejo.Titulo), (RenderFragment)(@<h1>Caso 1122</h1>) },
            { nameof(ModalComplejo.Contenido), (RenderFragment)(@<><h2>Lorem ipsum</h2><p>Lorem ipsum factum...</p></>) },
            { nameof(ModalComplejo.Botonera), (RenderFragment)(@<><label for="guardar-btn">Guardar</label><input type="button" id="guardar-btn" /><label for="cerrar-btn">Cerrar</label><input type="button" id="cerrar-btn" /></>) }
        };

        // 触发模态框显示
        dialogService.Show<ModalComplejo>("", parameters);

        // 强制组件树重新渲染，确保模态框内容更新
        cut.Render();

        // 验证各部分内容是否正确渲染
        cut.Find("h1").MarkupMatches("<h1>Caso 1122</h1>");
        cut.Find("h2").MarkupMatches("<h2>Lorem ipsum</h2>");
        cut.Find("p").MarkupMatches("<p>Lorem ipsum factum...</p>");
        Assert.True(cut.Find("#guardar-btn").Exists());
        Assert.True(cut.Find("#cerrar-btn").Exists());
    }
}

其他需要注意的问题 #

• 原测试中的MarkupMatches("<H1>Hello World<H1>")与实际传入的内容完全不匹配，会直接导致测试失败，必须修正为对应实际渲染的标记。
• 调用Show方法后，必须调用cut.Render()强制组件树更新，否则无法捕获到模态框的渲染内容。
• 确保服务注册的正确性，MudDialogProvider和DialogService是MudBlazor模态框正常工作的核心依赖，缺一不可。

内容的提问来源于stack exchange，提问作者Mauro Alvarez