In this article, we are going to learn about unit testing a Blazor WebAssembly Project using the bUnit testing library.<\/p>\n
If you find some of the concepts we are testing hard to understand, we have a great Blazor WebAssembly Series<\/a> that is worth checking out.<\/p>\n With that, let’s start.<\/p>\n To test a Blazor component, we need to render the component with any relevant input required so we can inspect the rendered markup<\/strong>. Also, we want to trigger event handlers and life cycle methods, to allow us to assert that the component is behaving as we expect it to. All of this is available to us through the bUnit testing library<\/a>.<\/p>\n It is important to note that dependencies such as CSS are not rendered<\/strong> when running unit tests<\/strong>. In order to verify that our component is styled correctly, this would require E2E (End-to-End) or Snapshot testing, which would render the component in a browser, along with any styling we have applied. We will only cover unit testing in this article.<\/p>\n As testing Blazor components is very similar to testing normal C# code, we can use testing frameworks that we are familiar with, such as xUnit<\/em>, NUnit<\/em>, or MSTest<\/em>. We use these testing frameworks in conjunction with bUnit to allow us to write stable unit tests for our Blazor components<\/strong>.<\/p>\n There are some slight differences in writing tests for our Blazor components compared to normal C# code. bUnit renders the components<\/strong> through the <\/strong> We can write our unit tests in either Firstly, we create a Blazor WebAssembly project by using the template from Visual Studio or the Next, let’s create our component in the Pages folder that we’ll use for testing:<\/p>\n We create a very simple component with a With our basic component created, let’s create a test project, by using the xUnit template provided by Visual Studio or the We need to remember to add the We’ll start by creating a class where we are going to write our tests:<\/p>\n We inherit the With this, we are ready to write our first test:<\/p>\n First, we decorate the method with the xUnit More often than not, our components require input, in the form of parameters<\/a>, so let’s create a component with one:<\/p>\n Now we have a Next, we’ll create a new test:<\/p>\n bUnit provides us with a strongly typed builder that we can use to pass parameters to our component. We use the\u00a0 Blazor allows us to bind to element event handlers<\/strong>, which we can also create tests for, so let’s create a new component that includes an event handler:<\/p>\n We create a simple Next, we can write a new test method to test our event handler:<\/p>\n First, we render our new component. Then, we use the If our event handler makes use of the Let’s refactor our component to use one of the This time, instead of unconditionally setting our variable to We must also change our test to account for this new functionality:<\/p>\n This time, we pass the It is good practice to keep our components free from complex logic by using services and injecting them into the components that require them<\/strong>. bUnit provides us with the Let’s create a simple service interface to return some data:<\/p>\n And a class that implements this interface:<\/p>\n With this service in place, let’s create a component that uses it:<\/p>\n First, we inject Now we can write a test to verify The first thing we must do is register our service, using the When we build applications with Blazor, we often need to interact with JavaScript using the JSInterop<\/a>. With bUnit, functionality is provided to emulate the Let’s start by creating a component that invokes some JavaScript:<\/p>\n First, we inject the Now we can write a test for this component:\u00a0<\/p>\n First, we need to set up the bUnit As Blazor WebAssembly is a purely client-side framework, we often need to interact with a server-side API over HTTP, which we do by using the HttpClient<\/a>.<\/p>\n Let’s create a component and inject First of all, we inject our Now we can write a unit test for this component. As we are injecting an With this package installed, let’s write our test:<\/p>\n The first thing we do is create some JSON data that is going to be returned from our mocked Now we need to set up the Blazor provides a Let’s create a component that uses the First, we inject the Now we can create a test to ensure our component correctly invokes the Firstly, we want to get the Now we have a good understanding of how to write unit tests for our Blazor components with bUnit. Unit testing gives us the confidence that our code does what we expect it to, and allows us to safely refactor code, knowing that we haven’t broken any piece in the process.<\/p>\n","protected":false},"excerpt":{"rendered":" In this article, we are going to learn about unit testing a Blazor WebAssembly Project using the bUnit testing library. If you find some of the concepts we are testing hard to understand, we have a great Blazor WebAssembly Series that is worth checking out. With that, let’s start. How to Test Blazor WebAssembly? To […]<\/p>\n","protected":false},"author":6,"featured_media":62188,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[684,12],"tags":[685,686,1224,576,173],"class_list":["post-69623","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blazor-webassembly","category-csharp","tag-blazor","tag-blazor-webassembly","tag-bunit","tag-testing","tag-unit-testing","et-has-post-format-content","et_post_format-et-post-format-standard"],"yoast_head":"\nHow to Test Blazor WebAssembly?<\/h2>\n
How To Write bUnit Tests?<\/h2>\n
TestContext<\/code> class,<\/strong> which provides us access to the rendered component instance, so that we can interact with the component.<\/p>\n.cs<\/code> or .razor<\/code> files. Writing tests in .razor<\/code> files provide an easier way to declare components and HTML markup, without having to do any character escaping. However, we need to ensure that the test project is set to the Microsoft.NET.Sdk.Razor<\/code> SDK type, otherwise the .razor<\/code> files won’t compile. As more people are probably familiar with writing tests in .cs<\/code> files, we are going to use this for the demo.<\/p>\nCreate Blazor WebAssembly Project<\/h2>\n
dotnet new blazorwasm<\/code> command.\u00a0<\/p>\n<p>Hello from TestComponent<\/p>\r\n\r\n@code {\r\n}<\/pre>\np<\/code> element and some text, which is enough for us to write our first test.<\/p>\nCreate xUnit Test Project<\/h2>\n
dotnet new xunit<\/code> command.\u00a0<\/p>\nbunit<\/code> NuGet package to this project, along with a reference to our Blazor WebAssembly project. Let’s write our first test to ensure the markup of our component matches what we expect.<\/p>\nTest Markup Matching<\/h2>\n
public class TestComponentTests : TestContext\r\n{\r\n}<\/pre>\nTestContext<\/code> class, which saves us from having to create a new one for each test to render our component.<\/p>\n[Fact]\r\npublic void TestComponent()\r\n{\r\n var cut = RenderComponent<TestComponent>();\r\n\r\n cut.MarkupMatches(\"<p>Hello from TestComponent<\/p>\");\r\n}<\/pre>\nFact<\/code> attribute, to let the test runner know this is a test method. Next, we render our TestComponent<\/code>. Finally, we verify that the markup matches the expected string.<\/p>\nAdd Parameters to Component<\/h2>\n
<p>Message: @Message<\/p>\r\n\r\n@code {\r\n [Parameter]\r\n public string Message { get; set; }\r\n}<\/pre>\nMessage<\/code> parameter that we simply render in a p<\/code> element.<\/p>\n[Fact]\r\npublic void TestComponentWithParameter()\r\n{\r\n var message = \"Message from test\";\r\n\r\n var cut = RenderComponent<TestComponentWithParameter>(parameters => parameters.Add(p => p.Message, message));\r\n\r\n cut.MarkupMatches($\"<p>Message: {message}<\/p>\");\r\n}<\/pre>\nAdd()<\/code> method from the ComponentParameterCollectionBuilder<\/code> class to select our Message<\/code> parameter and pass in the message<\/code> we defined in our test method. Again, we test that the markup matches, ensuring to include our new message text.<\/p>\nTrigger Event Handlers<\/h2>\n
<p>Button clicked: @buttonClicked<\/p>\r\n\r\n<button @onclick=\"OnClick\">Click me<\/button>\r\n\r\n@code {\r\n bool buttonClicked = false;\r\n \r\n void OnClick() => buttonClicked = true;\r\n}<\/pre>\nonclick<\/code> event handler for the button<\/code>, that sets buttonClicked<\/code> to true<\/code>.<\/p>\n[Fact]\r\npublic void TestComponentWithEventHandler()\r\n{\r\n var cut = RenderComponent<TestComponentWithEventHandler>();\r\n\r\n cut.Find(\"button\").Click();\r\n\r\n cut.Find(\"p\").MarkupMatches(\"<p>Button clicked: True<\/p>\");\r\n}<\/pre>\nIRenderedComponent<\/code> to find our button<\/code> element, which returns an Anglesharp<\/a> Dom element. This allows us to call the Click()<\/code> method, which executes our onclick<\/code> event handler. Finally, we find our p<\/code> element and verify the markup matches.<\/p>\nEventArgs<\/code> parameter, we can optionally provide this information in our test.<\/p>\nMouseEventArgs<\/code> properties:<\/p>\n<p>Control key pressed: @controlKeyPressed<\/p>\r\n\r\n<button @onclick=\"OnClick\">Click me<\/button>\r\n\r\n@code {\r\n\r\n bool controlKeyPressed = false;\r\n\r\n void OnClick(MouseEventArgs e) => controlKeyPressed = e.CtrlKey;\r\n}<\/pre>\ntrue<\/code>, we bind it to the CtrlKey<\/code> property, which is set to true<\/code> if the Ctrl key is pressed when clicking the button.<\/p>\n[Fact]\r\npublic void TestComponentWithEventHandler()\r\n{\r\n var cut = RenderComponent<TestComponentWithEventHandler>();\r\n\r\n cut.Find(\"button\").Click(ctrlKey: true);\r\n\r\n cut.Find(\"p\").MarkupMatches(\"<p>Control key pressed: True<\/p>\");\r\n}<\/pre>\nctrlKey<\/code> optional parameter to the Click()<\/code> method. We must also remember to update the MarkupMatches<\/code> parameter as our markup has changed.<\/p>\nService Injection<\/h2>\n
Services<\/code> collection, so we can register any dependencies our component might need when writing our tests.<\/p>\npublic interface IDataService()\r\n{\r\n List<string> GetData();\r\n}<\/pre>\npublic class DataService : IDataService\r\n{\r\n public List<string> GetData() => new List<string> { \"Data 1\", \"Data 2\" };\r\n}<\/pre>\n@inject IDataService DataService;\r\n\r\n@if (MyData is null)\r\n{\r\n <p>Retrieving data...<\/p>\r\n}\r\nelse\r\n{\r\n <p>Data retrieved<\/p>\r\n}\r\n\r\n@code {\r\n\r\n public List<string> MyData { get; set; }\r\n\r\n protected override void OnInitialized()\r\n {\r\n MyData = DataService.GetData();\r\n }\r\n}\r\n<\/pre>\nIDataService<\/code>, and conditionally render a p<\/code> element depending on whether MyData<\/code> is null. In the OnInitialized<\/code> life cycle method, we retrieve the data from our service.<\/p>\nMyData<\/code> is populated correctly:<\/p>\n[Fact]\r\npublic void TestComponentWithInjection()\r\n{\r\n Services.AddSingleton<IDataService, DataService>();\r\n\r\n var cut = RenderComponent<TestComponentWithInjection>();\r\n\r\n Assert.NotNull(cut.Instance.MyData);\r\n}<\/pre>\nServices<\/code> collection. Next, we render our component, and finally, we assert that MyData<\/code> is not null, by accessing the component under test Instance<\/code> property.<\/p>\nTest JSInterop<\/h2>\n
IJSRuntime<\/code> that we inject into our components to interact with JavaScript.<\/p>\n@inject IJSRuntime JSRuntime\r\n\r\n<button @onclick=\"ShowAlert\">Show Alert<\/button>\r\n\r\n@code {\r\n private async Task ShowAlert() => await JSRuntime.InvokeVoidAsync(\"alert\", \"Alert from Blazor component\");\r\n}<\/pre>\nIJSRuntime<\/code>. Then we create a button that has an onclick<\/code> event handler that calls the ShowAlert<\/code> method. In this method, we invoke the JavaScript alert<\/code> method, passing in a message to display.<\/p>\n[Fact]\r\npublic void TestComponentWithJSInterop()\r\n{\r\n JSInterop.SetupVoid(\"alert\", \"Alert from Blazor component\");\r\n\r\n var cut = RenderComponent<TestComponentWithJSInterop>();\r\n\r\n cut.Find(\"button\").Click();\r\n \r\n JSInterop.VerifyInvoke(\"alert\", calledTimes: 1);\r\n}<\/pre>\nJSInterop<\/code>, by calling the SetupVoid()<\/code> method, passing in our alert<\/code> method and message we want to show. Next, we render our component, and then find our button and call the Click()<\/code> method. Finally, we verify our alert<\/code> method was called once through the JSInterop<\/code>.<\/p>\nMock HttpClient<\/h2>\n
HttpClient<\/code>:<\/p>\n@inject HttpClient Http;\r\n\r\n@if (DataFromApi is null)\r\n{\r\n <p>Retrieving data from API...<\/p>\r\n}\r\nelse\r\n{\r\n <p>Data from API retrieved<\/p>\r\n}\r\n\r\n@code {\r\n public List<string> DataFromApi { get; set; }\r\n\r\n protected override async Task OnInitializedAsync()\r\n {\r\n \tDataFromApi = await Http.GetFromJsonAsync<List<string>>(\"\/api\/data\");\r\n }\r\n}<\/pre>\nHttpClient<\/code>. Similar to our component that injects a service, we conditionally render a p<\/code> element depending on whether DataFromApi<\/code> is null or not. In the OnInitializedAsync<\/code> method, we retrieve our data from the \/api\/data<\/code> endpoint.<\/p>\nHttpClient<\/code>, we need to mock it, which we can do using the RichardSzalay.MockHttp<\/a> package. This is not the only way to achieve this as we could create our own mock of HttpClient<\/code> using a library such as Moq<\/a>. However, we will only focus on the RichardSzalay package for this article<\/strong>.<\/p>\n[Fact]\r\npublic void TestComponentWithHttpClient()\r\n{\r\n var content = JsonSerializer.Serialize(new List<string> { \"data\" });\r\n \r\n var mockHttp = new MockHttpMessageHandler();\r\n var httpClient = mockHttp.ToHttpClient();\r\n httpClient.BaseAddress = new Uri(\"http:\/\/localhost\");\r\n\r\n Services.AddSingleton(httpClient);\r\n\r\n mockHttp.When(\"\/api\/data\")\r\n .Respond(HttpStatusCode.OK, \"application\/json\", content);\r\n\r\n var cut = RenderComponent<TestComponentWithHttpClient>();\r\n\r\n cut.WaitForAssertion(() => Assert.NotNull(cut.Instance.DataFromApi));\r\n}<\/pre>\nHttpClient<\/code>. Next, we create a new MockHttpMessageHandler<\/code> and then call the ToHttpClient<\/code> method to get our HttpClient<\/code>, also making sure to set the BaseAddress<\/code>. Then, we register the HttpClient<\/code> with the Services<\/code> collection.\u00a0<\/p>\nMockHttpMessageHandler<\/code> to respond to requests to \/api\/data<\/code> and return our JSON data. As usual, we register our component, and finally, as we are using an asynchronous method to retrieve our data, we need to use WaitForAssertion()<\/code>, checking that our DataFromApi<\/code> list is not null.<\/p>\nMock NavigationManager with bUnit<\/h2>\n
NavigationManager<\/code> service, which can be injected into our component to give us browser navigation. bUnit provides a fake version of NavigationManager<\/code> which is added by default to the TestContext.Services<\/code> collection.<\/p>\nNavigationManager<\/code>:<\/p>\n@inject NavigationManager NavigationManager\r\n\r\n<button @onclick=\"NavigateToHome\">Navigate to Home<\/button>\r\n\r\n@code {\r\n void NavigateToHome() => NavigationManager.NavigateTo(\"\/home\");\r\n}<\/pre>\nNavigationManager<\/code> class and add a button with an onclick<\/code> handler. In our NavigateToHome<\/code> method, we simply call NavigateTo<\/code> and navigate to \/home<\/code>.<\/p>\nNavigationManager<\/code> class:<\/p>\n[Fact]\r\npublic void TestComponentWithNavigationManager()\r\n{\r\n var navigationManager = Services.GetRequiredService<FakeNavigationManager>();\r\n var cut = RenderComponent<TestComponentWithNavigationManager>();\r\n\r\n cut.Find(\"button\").Click();\r\n\r\n Assert.Equal($\"{navigationManager.BaseUri}home\", navigationManager.Uri);\r\n}<\/pre>\nFakeNavigationManager<\/code> provided by bUnit. Next, we render our component and find our button so we can execute the Click<\/code> event. To test that our navigation worked correctly, we can compare our expected Uri of http:\/\/localhost\/home<\/code> to the NavigationManager.Uri<\/code> property.<\/p>\nConclusion<\/h2>\n