17370845950

Blazor组件单元测试核心是用bUnit搭配xUnit/NUnit，不依赖浏览器和DOM，专注逻辑、渲染与交互验证；需新建xUnit项目、引用客户端项目、安装bUnit包、启用可空引用类型，继承TestContext或封装基类，聚焦参数渲染、事件交互、子组件投影三类场景，结合DOM输出与实例状态断言。

Blazor 组件单元测试核心是用 bUnit 搭配 xUnit（或 NUnit），不跑浏览器、不依赖 DOM，专注验证组件逻辑、渲染输出和交互行为。关键不在“能不能测”，而在于“怎么搭得轻、写得清、断言得准”。

搭测试项目：三步到位

新建 xUnit 测试项目，引用待测的 Blazor 客户端项目，并添加 bUnit：

• 用 CLI：dotnet new xunit -n MyApp.Tests，再 dotnet add reference ../src/MyApp.Client
• 加 bUnit 包：dotnet add package bunit --version 1.24.2（推荐稳定版）
• 确保测试项目启用可空引用类型（enable），与被测组件保持一致

写测试类：继承 TestContext 或自定义基类

不用从零初始化上下文，直接用 bUnit 提供的 TestContext：

• 最简写法：var ctx = new TestContext();，然后 ctx.RenderComponent()
• 若用 BootstrapBlazor 等封装库，继承 BootstrapBlazorTestBase，它已预配置服务（如本地化、缓存、路由）
• 需注入服务时，在 ctx.Services 中注册模拟实现，例如 ctx.Services.AddSingleton(new MockWeatherService())

测什么？聚焦三个真实场景

别堆覆盖率，优先覆盖用户能感知的行为：

• 参数驱动渲染：传不同 Color、Disabled 值，检查生成的 class 或是否禁用按钮 —— 用 [Theory] + [InlineData] 参数化
• 事件交互：触发 @onclick、@oninput，验证状态变更或回调是否执行 —— cut.Find("button").Click(); 后断言 cut.Instance.IsLoading
• 子组件与内容投影：检查 @ChildContent 是否正确渲染，或 RenderFragment 内容是否出现

断言技巧：看 HTML 还是看状态？

两者结合更可靠：

• 查 DOM 输出：cut.MarkupMatches("Save")
• 查组件实例状态：Assert.True(cut.Instance.IsEnabled);
• 查事件是否触发：var clicked = false; cut.SetParametersAndRender(p => p.Add(x => x.OnClick, () => clicked = true)); cut.Find("button").Click(); Assert.True(clicked);

基本上就这些。不复杂但容易忽略的是：服务模拟要到位、参数组合要覆盖边界值、避免过度断言内部实现细节。测得稳，改得才放心。