如何用bUnit验证Blazor组件Subdiv中的文本渲染结果？

完全不用折腾ID生成系统或者静态ID，Blazor的组件测试框架（比如bUnit）有更直接靠谱的方式：

方法1：直接通过文本内容查找验证 #

适合组件结构简单的场景，直接定位包含目标文本的元素：

[Fact]
public void TestTitleIsRenderedCorrectly()
{
    // Act
    var cut = RenderComponent<MyComponent>(parameters => parameters
        .Add(p => p.Title, "title")
    );

    // Assert
    // 验证元素存在且文本正确
    var targetElement = cut.Find("div:contains('title')");
    targetElement.TextContent.Should().Be("title");
}

方法2：通过DOM层级精准定位 #

如果组件里有多个div，利用层级关系锁定目标元素（比如根div下的第二个子div）：

[Fact]
public void TestTitleIsRenderedInCorrectDiv()
{
    // Act
    var cut = RenderComponent<MyComponent>(parameters => parameters
        .Add(p => p.Title, "title")
    );

    // Assert
    var targetDiv = cut.Find("div > div:nth-child(2)");
    targetDiv.TextContent.Should().Be("title");
}

方法3：添加测试专用CSS类（推荐） #

给目标div加个仅用于测试的CSS类（不影响生产样式），定位更精准且语义清晰：
修改组件代码：

<div>
    <div>
    </div>
    <div class="test-title-container">
        @Title
    </div>
</div>

测试代码：

[Fact]
public void TestTitleIsRenderedInCorrectContainer()
{
    // Act
    var cut = RenderComponent<MyComponent>(parameters => parameters
        .Add(p => p.Title, "title")
    );

    // Assert
    var titleContainer = cut.Find(".test-title-container");
    titleContainer.TextContent.Should().Be("title");
}

这几种方法都不需要额外的ID逻辑，简单高效，还能保证测试的稳定性和可维护性。

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