Blazorアプリの単体テスト｜ASP.NET×Blazor入門 12.1

12.1 単体テスト（xUnit + bUnit）

開発したアプリケーションが正しく動作しているかを確かめるうえで、単体テスト（Unit Test）は欠かせません。特にBlazorのようにUIロジックをコンポーネント単位で構築する開発スタイルにおいては、各コンポーネントやサービスが期待通りに動くかどうかを検証する仕組みが、保守性や信頼性を大きく左右します。

xUnit：ロジック層のテストに最適

Blazorアプリでは、ビジネスロジックやデータアクセスの層をC#クラスとして切り出していることが多く、これらのテストには xUnit を使うのが一般的です。 xUnitは.NET標準のテストフレームワークの一つで、Visual Studioでも高い互換性があります。


// Calculator.cs
public class Calculator {
    public int Add(int a, int b) => a + b;
}

// CalculatorTests.cs
public class CalculatorTests {
    [Fact]
    public void Add_正しい加算結果を返す() {
        var calc = new Calculator();
        Assert.Equal(5, calc.Add(2, 3));
    }
}

上記のように、シンプルな関数を小さく区切ってテストできるようにすることが、堅牢なコード設計につながります。

bUnit：Blazorコンポーネントを直接テストする

Blazorの魅力は、UIをC#で定義しながらも、柔軟な状態管理とユーザー操作に対応できることです。そのUIコンポーネント自体をテストしたいときに使えるのが bUnit です。 bUnitは、Blazorコンポーネントを仮想DOMでレンダリングして、表示内容や状態を検証できる強力なツールです。


// Counter.razor

Count: @count




@code {
    int count = 0;
    void Increment() => count++;
}

// CounterTest.cs
public class CounterTest : TestContext {
    [Fact]
    public void 初期状態は0() {
        var cut = RenderComponent<Counter>();
        cut.MarkupMatches("<h3>Count: 0</h3><button>+1</button>");
    }

    [Fact]
    public void ボタンをクリックすると1増える() {
        var cut = RenderComponent<Counter>();
        cut.Find("button").Click();
        cut.Find("h3").MarkupMatches("<h3>Count: 1</h3>");
    }
}

テストコードが直感的でありながら、UIの状態遷移まで検証できる点がbUnitの強みです。 CI/CDとの連携や回帰テストにも向いており、Blazor開発においては必須といえるでしょう。