Testing Blazor components using bUnit

Testing Blazor components using bUnit

In this post, I describe how to create unit tests for Blazor components using bUnit ans xUnit.

bUnit is a framework to test Blazor components. It allows to validate that a component renders the expected HTML and reacts to events. bUnit runs in-memory and doesn't require a browser. This means tests run in isolation and are fast. Because there is no browser, it cannot execute JavaScript code. So, you may not be able to test correctly components that rely on JS interop. If your JS is very simple and does really impact the behavior of the component it is possible to mock the IJSRuntime interface as we'll see later. For more complex scenario, you'll need to do end-to-end (E2E) testing with solutions such as Selenium, Puppeteer, or Playwright.

#bUnit basic

Let's create a component to test. It is based on the Counter.razor component from the template:

<p>Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

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

Now you can create a unit test project that uses xUnit using Visual Studio or the command line:

dotnet new xunit -o MyTestProject

Then, add a reference to the project that contains the component, and add the NuGet packages bunit.weband bunit.xunit. The csproj file should look like:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <IsPackable>false</IsPackable>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="bunit.web" Version="1.0.0-beta-10" />
    <PackageReference Include="bunit.xunit" Version="1.0.0-beta-10" />
    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.7.1" />
    <PackageReference Include="xunit" Version="2.4.1" />
    <PackageReference Include="xunit.runner.visualstudio" Version="2.4.3">
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      <PrivateAssets>all</PrivateAssets>
    </PackageReference>
  </ItemGroup>
  <ItemGroup>
    <ProjectReference Include="..\MyProject\MyProject.csproj" />
  </ItemGroup>
</Project>

You can now create the first test:

[Fact]
public void CounterComponentTest()
{
    // Arrange
    using var ctx = new TestContext();
    var component = ctx.RenderComponent<Counter>();

    // Act
    component.Find("button").Click();

    // Assert
    component.MarkupMatches(@"<p>Current count: 1</p><button>Click me</button>");
}

blazor .net asp.net core web

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.

Blazor for ASP.NET Web Forms Developers PDF

In this blog post, I will share the Free e-book: Blazor for ASP.NET Web Forms Developers PDF. This book is great for ASP.NET Web Forms developers looking for guidelines. As well as strategies for migrating their existing apps to a modern, open-source, and cross-platform web framework.

MVC User Registration & Login with ASP.NET Core Identity

In this article, we will discuss the quickest way to use ASP.NET Core Identity for User Login and Registration in a new or existing MVC application.

Running WordPress on ASP.NET Core with Peachpie

In this article, you will learn how to use or integrate WordPress in ASP.NET and Running WordPress on ASP.NET Core, without PHP, or any source files on the server. The following demonstration will show you how to add WordPress as a frontend to an existing ASP.NET Core application step by step.

Clear session in asp net core

LIKE | COMMENT | SHARE | SUBSCRIBE Today I will show you how to clear session data after logout from web application using asp.net core... Source code link :...