Blazor WASM中<MudSelect>单元测试：为何<MudSelectItem>未渲染？

现象原因 #

MudSelect的下拉面板（包含所有<MudSelectItem>）默认处于隐藏状态，它的DOM元素不会在组件初始渲染时生成。MudBlazor内部通过条件渲染逻辑控制下拉面板的挂载，只有当用户点击MudSelect的输入区域触发展开操作后，下拉面板才会被渲染到DOM中。而你直接放在<MudSelect>标签内的<div>不受这个条件渲染逻辑限制，所以会在初始渲染时直接输出。

单元测试实现方案 #

基于BUnit、Xunit和Moq，可以按照以下步骤测试MudSelect的功能：

1. 初始化测试环境 #

在测试类中注册MudBlazor所需的服务，确保组件能正常渲染：

using Bunit;
using Xunit;
using MudBlazor.Services;
using YourProjectNamespace;

public class ParticipantStatusFilterTests : TestContext
{
    public ParticipantStatusFilterTests()
    {
        // 注册MudBlazor服务
        Services.AddMudServices();
    }
}

2. 验证下拉选项是否正确渲染 #

先触发下拉面板展开，再验证<MudSelectItem>是否存在：

[Fact]
public void MudSelect_ShouldRenderAllOptions_WhenExpanded()
{
    // 渲染目标组件
    var cut = RenderComponent<YourComponent>();
    
    // 找到MudSelect的触发区域并模拟点击展开下拉
    var selectTrigger = cut.Find(".mud-select-input-container");
    selectTrigger.Click();

    // 验证所有StatusOption对应的MudSelectItem都存在
    var statusOptions = new[] { "New Enquiry", "Onboarding Follow-Up", "Meeting Scheduled", "New Client" };
    foreach (var status in statusOptions)
    {
        // 通过ID查找对应选项
        cut.Find($"#participant-status-{status}");
    }
}

3. 测试多选功能 #

模拟选择选项，验证选中值是否正确：

[Fact]
public void MudSelect_ShouldUpdateSelectedValues_WhenOptionIsClicked()
{
    var cut = RenderComponent<YourComponent>();
    var mudSelect = cut.FindComponent<MudSelect<string>>();
    
    // 展开下拉
    cut.Find(".mud-select-input-container").Click();
    
    // 点击某个选项
    var targetItem = cut.Find("#participant-status-New Client");
    targetItem.Click();

    // 验证选中值是否包含目标选项
    Assert.Contains("New Client", mudSelect.Instance.SelectedValues);
}

4. 测试全选功能 #

验证点击全选按钮后所有选项被选中：

[Fact]
public void MudSelect_ShouldSelectAllOptions_WhenSelectAllIsClicked()
{
    var cut = RenderComponent<YourComponent>();
    var mudSelect = cut.FindComponent<MudSelect<string>>();
    var statusOptions = new[] { "New Enquiry", "Onboarding Follow-Up", "Meeting Scheduled", "New Client" };
    
    // 展开下拉
    cut.Find(".mud-select-input-container").Click();
    
    // 点击全选按钮
    var selectAllBtn = cut.Find(".mud-select-select-all");
    selectAllBtn.Click();

    // 验证所有选项都被选中
    Assert.Equal(statusOptions.OrderBy(x => x), mudSelect.Instance.SelectedValues.OrderBy(x => x));
}

5. 测试选中值变化回调 #

如果需要验证SelectedValuesChanged回调是否正确触发，可以用Moq模拟回调方法：

[Fact]
public void MudSelect_ShouldTriggerSelectedValuesChanged_WhenOptionIsSelected()
{
    bool callbackTriggered = false;
    List<string> selectedValues = null;

    // 渲染组件时传入回调
    var cut = RenderComponent<YourComponent>(parameters => parameters
        .Add(p => p.SelcetOption, (values) => 
        {
            callbackTriggered = true;
            selectedValues = values.ToList();
        })
    );
    
    // 展开下拉并选择选项
    cut.Find(".mud-select-input-container").Click();
    cut.Find("#participant-status-New Enquiry").Click();

    // 验证回调被触发且值正确
    Assert.True(callbackTriggered);
    Assert.Contains("New Enquiry", selectedValues);
}

内容的提问来源于stack exchange，提问作者hanushi-thana