bUnit测试渲染Blazor组件时如何绑定非Parameter属性值

问题背景 #

StoreTable组件存在如下条件渲染逻辑，仅当ProductList或SnpDTO不为null时才渲染内部控件：

public ProductDetailsDto ProductList { get; set; } = new ProductDetailsDto();
public FreightSnpPoliciesDto SnpDTO { get; set; } = new FreightSnpPoliciesDto();


@if (ProductList != null || SnpDTO != null)
{
    // 业务控件渲染逻辑
}

编写单元测试时调用Find("#publishChangesBtn")查找内部按钮始终失败，判定为属性未正确赋值导致条件不成立，且两个属性未标记[Parameter]特性，无法通过常规组件参数传参。

可行实现方案 #

• 方案1：渲染后直接访问实例赋值，触发重渲染
  bUnit（Blazor官方单元测试库）渲染组件后会暴露组件实例对象，可直接访问public属性赋值，之后手动触发重渲染即可让条件判断生效，代码示例：

  // 初始渲染组件
  var storeTableComponent = RenderComponent<StoreTable>();
  
  // 直接给公开属性赋值，填充测试用mock数据
  storeTableComponent.Instance.ProductList = new ProductDetailsDto
  {
      // 按需填充测试所需字段值
  };
  storeTableComponent.Instance.SnpDTO = new FreightSnpPoliciesDto
  {
      // 按需填充测试所需字段值
  };
  
  // 触发组件重渲染，条件块内控件会被正常输出
  storeTableComponent.Render();
  
  // 此时即可正常查找目标控件
  var publishChangesBtn = storeTableComponent.Find("#publishChangesBtn");
  

  如果属性是private/protected修饰，可通过反射方式赋值，更推荐将测试需要访问的属性改为public，减少不必要的反射逻辑。

• 方案2：mock依赖服务，走组件原生生命周期赋值
  如果这两个属性原本是在组件OnInitialized/OnInitializedAsync生命周期中，通过注入的服务请求获取的，不需要手动给属性赋值，只需要在测试服务容器中提前注册mock的依赖服务，返回测试数据即可：

  using var testCtx = new TestContext();
  // mock组件依赖的数据服务
  var mockProductService = new Mock<IProductService>();
  mockProductService.Setup(s => s.GetDetails(It.IsAny<long>()))
      .ReturnsAsync(new ProductDetailsDto());
  var mockFreightService = new Mock<IFreightPolicyService>();
  mockFreightService.Setup(s => s.GetSnpPolicy(It.IsAny<long>()))
      .ReturnsAsync(new FreightSnpPoliciesDto());
  // 注册mock服务到测试容器
  testCtx.Services.AddScoped(_ => mockProductService.Object);
  testCtx.Services.AddScoped(_ => mockFreightService.Object);
  
  // 渲染组件，组件会自动执行生命周期方法从服务拉取数据给属性赋值
  var storeTableComponent = testCtx.RenderComponent<StoreTable>();
  // 等待异步渲染完成后即可查找控件
  var publishChangesBtn = storeTableComponent.Find("#publishChangesBtn");
  

注意：你当前的属性定义已经在初始化时new了对应实例，默认值不为null，正常首次渲染就应该满足条件。如果测试中依然判定属性为null，优先排查组件内部是否有逻辑将两个属性主动赋值为null，可在渲染后直接查看storeTableComponent.Instance下的属性实际值定位问题。

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