Unit Testing in Blazor with bUnit

Introduction

Unit testing is a fundamental practice in software development that ensures the reliability and correctness of your code. In Blazor, implementing robust unit tests becomes crucial to maintaining the integrity of your applications.

We will explore the use of bUnit, a testing library specifically designed for Blazor applications, to streamline and enhance the testing process. This comprehensive guide will walk you through the essentials of unit testing, empowering you to write more reliable and maintainable code.

GitHub Repository

I’m following the GitHub repository BlazorUnitTestingTutorial by Patrick God.

Getting Started

1. Create a Blazor WASM project named BlazorUnitTestingTutorial using the template.
2. Add a new xUnit Test Project named BlazorTestProject in the same solution and install the NuGet package bUnit.

Writing Our First Test

• In our Blazor project, there’s a component called Counter.razor. Inside, there’s a button with the label “Click me.” Every time you click this button, the counter increments by 1. Our initial test will focus on verifying this functionality.

• By default, UnitTest1.cs is created in the project’s root directory. The file will have the following code:

namespace BlazorTestProject
{
    public class UnitTest1
    {
        [Fact]
        public void Test1()
        {
        }
    }
}

• Replace the code in UnitTest1.cs with the following code:

using BlazorUnitTestingTutorial.Pages;
using Bunit;

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

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

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

• Then, if you right-click on the test project, you’ll see an option “Run Tests” having a “🧪” like icon 😄.
• It’ll take some time, but you’ll see that our first test is executed successfully. 😀

Passing Parameters to Blazor Component

• Next, we’ll explore how to pass parameters to our components. For that, we need to make a few modifications to our Counter.razor component.

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    [Parameter]
    public int Value { get; set; } = 1;

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount += Value;
    }
}

• After modifying our component we’ll add another test in “UnitTest1.cs”:

[Fact]
public void CounterShouldIncrementByValueWhenClicked()
{
    var cut = RenderComponent<Counter>(parameters => parameters.Add(p => p.Value, 2));

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

    cut.Find("p").MarkupMatches("<p role=\"status\">Current count: 2</p>");
}

• In the above code, we passed a parameter named “Value” to our Blazor component.

Conclusion

Through this exploration of Blazor unit testing, we’ve equipped ourselves with the tools and knowledge to make our applications super strong. Just as implementing authentication provides security and control in web applications, thorough unit testing ensures the integrity of your codebase. By following these steps, you can build maintainable Blazor applications, delivering a seamless and reliable experience to your users.