Blazor WebAssembly 新手入門會碰上的問題也講得差不多了，最後的最後我們來講講如何在 Blazor 中撰寫測試吧！

為什麼要寫測試對於現在的時空背景來說，已經有太多文章撰寫了，如果不了解測試、不知道如何測試，可以先看看各大神的文章，解釋的一定比我還要詳細，看完覺得測試對你有幫助，再往下閱讀吧！

官方並沒有提供 Blazor 的測試框架，現在主流都是使用社群專案(bUnit)來提供便利的 Blazor 單元測試所需要的元件，也因為來源於社群，所以微軟並不會支援與維護，完全倚賴社群。

而使用 bUnit 前，是需要由測試框架來執行，所以先建立 MSTest、NUnit、xUnit 中的任何一個測試專案，如果你曾經寫過 .NET 的單元測試，選擇你熟悉的測試框架即可。

然後安裝 bunit 套件即可撰寫 Blazor 測試，但因為 bunit 還在 beta 狀態，如果你是使用 Nuget 來安裝需要勾選「包括搶鮮版」，否則是看不到該套件的，撰文當下的版本號為 1.0.0-beta-10。

如果你選擇的是 xUnit 你需要安裝 bunit.web 與 bunit.xunit 套件。

如果你選擇的是 NUnit 與 MSTest 你只需要安裝 bunit.web 套件。

這樣就可以來撰寫測試專案了，這邊我準備兩個簡單的測試範例，以昨天建立的 Component1.razor 來當作測試範本。

  1. 測試元件的基本畫面：
1
2
3
4
5
6
7
8
9
// Arrange
using var ctx = new TestContext();
var cut = ctx.RenderComponent<Component1>();

// Act
var div = cut.Find("div.my-component");

// Assert
div.MarkupMatches("<div class=\"my-component\">This Blazor component is defined in the <strong>Blazor30daysRCL</strong> package.</div>");

TestContext 是用來創建受測元件的工廠，透過 RenderComponent<TComponent> 來實體化並執行 TComponent 組件的第一次渲染。

這邊我使用 Find(string cssSelector) 來取得 div.my-component 元素，型別為 IElement 想要取得基本的元素成員或者執行任何事件都可以，最後透過 MarkupMatches 方法來比較兩邊的 HTML 是否一致。

  1. 測試服務呼叫 JSRuntime：
1
2
3
4
5
6
7
8
9
10
11
// Arrange
using var ctx = new TestContext();
var mockJS = ctx.Services.AddMockJSRuntime();
mockJS.SetupVoid("exampleJsFunctions.showPrompt");
var JSRuntime = ctx.Services.GetService<IJSRuntime>();

// Act
ExampleJsInterop.Prompt(JSRuntime, "message");

// Assert
mockJS.VerifyInvoke("exampleJsFunctions.showPrompt");

這邊針對 TestContext 注入 MockJSRuntime，並透過 SetupVoid(string identifier) 修改呼叫識別碼為 exampleJsFunctions.showPrompt 時其傳回結果為空值，並以 VerifyInvoke(string identifier) 來判斷此識別碼是否被呼叫過，若要測試指定呼叫次數可以帶入第二個參數代表呼叫次數，若為不曾呼叫過則建議使用 VerifyNotInvoke(string identifier) 語意更清楚。

以上就是簡單的測試撰寫介紹，測試也是一個很大的坑，現在網路上的資源也不多，畢竟是 blazor 的測試套件，而且還在 beta 階段，如果以後有機會再來好好分享。

感謝大家的閱讀，我們明天見。

參考資料
測試 ASP.NET Core Blazor 中的元件
bUnit
bUnit Github