如何使用bUnit检测Blazor组件中的元素是否获得焦点？

问题场景 #

我有一个简化的Blazor组件<MyButton/>：

<button>MyButton</button>

使用bUnit编写单元测试时，尝试验证点击按钮后是否获得焦点，但IsFocused断言始终不生效：

@inherits TestContext

@code {
    [Fact]
    public void MyButton_Focuses_Correctly()
    {
        IRenderedFragment cut = Render(@<MyButton></MyButton>);
        IElement button = cut.Find("button");

        button.Click();

        Assert.True(button.IsFocused); // 此处断言失败
    }
}

像IsDisabled、IsChecked这类状态可以通过检查DOM属性验证：

Assert.True(button.HasAttribute("disabled"));

但焦点状态没有对应的HTMLfocused属性，无法用同样方式验证。

解决方案 #

1. 手动模拟焦点操作（适用于组件无自动焦点逻辑的测试） #

如果组件本身没有在点击时自动获取焦点的逻辑，测试中需要手动触发焦点事件，再验证状态：

[Fact]
public void MyButton_Focuses_Correctly()
{
    var cut = Render(@<MyButton></MyButton>);
    var button = cut.Find("button");

    button.Click();
    // 手动触发焦点
    button.Focus();

    Assert.True(button.IsFocused);
}

2. 验证文档活跃元素（适用于组件有自动焦点逻辑的测试） #

如果<MyButton>组件内部有点击后自动获取焦点的逻辑（比如调用ElementReference.FocusAsync()），可以通过检查文档的ActiveElement来判断焦点：

[Fact]
public void MyButton_Focuses_Correctly()
{
    var cut = Render(@<MyButton></MyButton>);
    var button = cut.Find("button");

    button.Click();

    // 验证按钮是否为当前活跃元素
    Assert.Equal(button, cut.Document.ActiveElement);
}

关键说明 #

HTML中不存在focused属性，元素的焦点是DOM的实时状态，而非静态属性。bUnit的IElement.IsFocused是对该状态的模拟，但需要确保焦点操作被正确触发：

• 若组件无自动焦点逻辑，需手动调用Focus()模拟
• 若组件有自动焦点逻辑，需确保组件内的FocusAsync()调用在测试环境中被正确执行

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