Hello Blazor:（15）使用bUnit进行单元测试

bUnit介绍

bUnit是Blazor组件测试库。其目标是使编写全面、稳定的单位测试变得容易。有了bUnit，你可以：

• 使用C#或Razor语法设置和定义测试下的组件

• 使用语义HTML比较器验证结果

• 与组件以及触发事件处理程序进行交互和检查

• 传递参数、级联值并将服务注入测试组件

• 模拟IJSRuntime，认证和授权等

bUnit是建立在现有单元测试框架（如xUnit、NUnit和MSTest）基础上的，这些框架以与任何正常单元测试相同的方式运行Blazor组件测试。与通常需要几秒钟才能运行的基于浏览器的UI测试相比，bUnit在毫秒内运行测试。

基本使用

创建一个Blazor WebAssembly 项目，然后添加一个xUnit测试项目。

在测试项目中引用Nuget包bUnit。

首先，让测试类继承TestContext，然后编写测试用例：

public class UnitTest1 : TestContext
{
    [Fact]
    public void Test1()
    {
        var cut = RenderComponent<Counter>();

        cut.Find("button").Click();

        cut.Find("p").MarkupMatches("<p>Current count: 1</p>");
    }
}

此测试用例通过RenderComponent方法呈现Counter组件，然后找到组件呈现的按钮并执行按钮的Click方法，最后，验证p元素是否与预期标记匹配。

模拟IJSRuntime

Blazor组件通常需要调用JavaScript，而在单元测试中，我们并不会运行JavaScript，因此bUnit需要模拟IJSRuntime。

假设组件代码如下：

@inject IJSRuntime JSRuntime
<button @onclick=ButtonClicked>Click</button>
@code
{
    private async Task ButtonClicked()
    {
        await JSRuntime.InvokeVoidAsync("alert", "My IO");
    }
}

然后编写测试用例：

[Fact]
public void Test1()
{
    var cut = RenderComponent<WebApplication20.Pages.Index>();
    JSInterop.SetupVoid("alert", "My IO");

    cut.Find("button").Click();
}

和普通测试用例唯一的不同，我们验证了IJSRuntime会调用alert方法并传入指定参数：

JSInterop.SetupVoid("alert", "My IO");

结论

使用bUnit，我们无需启动Blazor应用，即可进行组件测试。