bUnitを救いたい ~BlazorのテストライブラリbUnitの紹介~ 木村 龍太郎 2023/10/26 Fukuoka.NET #25

2 自己紹介 ⚫ 木村龍太郎 （きむら りゅうたろう） ⚫ オルターブース 23卒 新入社員 ⚫ jsakamotoさんと話すためにBlazor の 知識詰め込んだ ⚫ Blazor WASMの理解でお世話になりました ⚫ レンダリング方法がReactと違っておもろい @ryutaro_1019

bUnitってご存じですか

4 bUnitとは Razorコンポーネントの単体テストを実現するテストライブラリ ⚫ 公式の Microsoft テスト フレームワークではない。 ⚫ MSTest、NUnit、xUnit などの汎用テスト フレームワークで動作する。 Counter.razor (Razorコンポーネント)の中身 【テストの例】 IncrementCount関数が実行されたとき 期待したUIに変わるかのテスト

今日話すこと

6 bUnitを救いたい ⚫ bUnitは記事がさみしい… ⚫ 上から四つ目で関係ない記事出るくらい(2023/10/26時点) ⚫ アルバイト時代の戦友(bUnit)を紹介したい ⚫ 半年くらいbUnit書いていた 今回の話を 通して bUnitの触りだけでも知ってもらい 知名度を上げる

7 基本的な書き方 @inherits TestContext @code { [Fact] public void CounterShouldIncrementWhenClicked() { // ①Arrange: Counter.razor コンポーネントをレンダリング var cut = Render(@); // ②Act: テストしたいCSSセレクタ(クラス名もOK)を指定しクリック。 cut.Find("button").Click(); // ③Assert: アサートしたいCSSセレクタを指定しその内容を確認する。 cut.Find("p").MarkupMatches(@

Current count: 1

); } } ←テスト対象のコンポーネント（Counter.razor） bUnitのテストコード→

8 他にも書いたテストケース ⚫ ボタンを押したら画面遷移するテスト → “/” から “/user” へのルーティングのアサート ⚫ サインインしていたら〇〇させるテスト →セッションにサインイン状態をセットする → HTMLのアサート ⚫ 非同期処理のテスト →WaitForAssersion()で非同期処理の終了を待つ → HTMLのアサート くわしくは公式ドキュメントを！

9 漁った記事 ⚫ 基本はbUnitの公式ドキュメントを読む ⚫ 読み方 1. 左の目次からテストしたい処理を探す さっきの例だと[Verifying output]とか 2. コードと説明を読む ⚫ エラーの解決策はGithubのissue ⚫ bUnit作者のEgilさんが答えてくれてる （jsakamotoさんも待ってます） https://bunit.dev/docs/getting-started/index.html

10 まとめ ⚫ bUnitはRazorコンポーネントの単体テスト用ライブラリ ⚫ bUnitの学習は公式ドキュメントとの睨めっこ ⚫ Egilさんとjsakamotoさんを見習おう