How-to: Add bUnit Test Project to Blazor Solution

Having automated tests for our Blazor applications is very important. We can use xUnit (or any other) test framework to write unit tests for the C# classes in our app. However, some part of our logic (even if it’s just the databinding logic) lives in Blazor components and pages. For those to be tested, we need to render the components and validate what they produce. bUnit is a testing framework for Blazor that provides those capabilities.

In this lesson, we will show step-by-step how to add an xUnit test project to an existing Blazor app project. And show how to install the bUnit packages into that test project. While this how-to focuses on a Blazor WebAssembly project, these same steps can be used for Blazor Server projects too.

First, create a Blazor WebAssembly project using the steps in the How-To: Create Blazor WASM Project article.

Create xUnit Project

With our Blazor WebAssembly project in place, we need to create a project to hold our tests.

  1. With the Blazor project open in Visual Studio, select ‘File > New > Project’ item from the main menu.
  2. In the Create new project dialog, search for ‘xUnit’.
  3. Select the ‘xUnit Test Project (.NET Core)’ C# template in the list. There isn’t a .NET 5 version of this project template in Visual Studio yet, so this is the best one to select and upgrade later.
  4. Click the ‘Create’ button.
Fig 1 – Create New xUnit Project
  1. In the Configure new project dialog, change the project name to your choosing (for this example, we will use Blazor.HowTo.Tests). For test projects, we typically use the naming convention of appending .Tests (or .UnitTests) to the name of the source project being tested. This ensures we can match project and tests in large solutions.
  2. Leave the location where it defaults to.
  3. Ensure ‘Add to solution’ is selected in the ‘Solution’ dropdown. We want to manage the source and test projects in the same solution.
  4. Click the ‘Create’ button.
Fig 2 – Configure New xUnit Project

This will result in a new project with a single class file in it (UnitTest1.cs). That file has an example of a single test method that performs no action and always passes, but it is a great template for tests that we write:

using System;
using Xunit;

namespace Blazor.HowTo.Tests
{
    public class UnitTest1
    {
        [Fact]
        public void Test1()
        {
        }
    }
}

We can also see that the test project template has NuGet package dependencies to xunit and xunit.runner.visualstudio. These bring in the references to the xUnit test framework.

Upgrade Project to .NET 5

Because we created a .NET Core xUnit project, we need to upgrade the test project to .NET 5. Luckily, it’s a straightforward upgrade path from .NET Core 3.1 to .NET 5.

Launch the Project Details window by right clicking on the new test project (Blazor.HowTo.Tests) and click the ‘Properties’ menu item.

Fig 3 – Test Project Details

In the ‘Target framework’ dropdown, change the version to .NET 5.0 to retarget our test project to that version of the framework. That’s all it takes! We can build our projects at this point to prove that everything is still working.

Update Current NuGet Packages

The project template also likely has older references to NuGet packages because Visual Studio is release monthly, but NuGet packages can be updated by the developer at any time.

  1. To see the currently installed NuGet Packages, right click on the ‘Dependencies’ node under the test project.
  2. Click the ‘Manage NuGet Packages’ menu item.
  3. In the NuGet Package Manager window, select the ‘Updates’ tab. If any current packages require an update, they will be listed here (as shown below). If this list is empty, then we are up to date and can skip rest of this section.
Fig 4 – NuGet Package Updates
  1. Check the ‘Select all packages’ box because we want to start with the latest versions of our dependencies.
  2. Then, click the ‘Update’ button.
Fig 5 – Update All Packages
  1. If any confirmation or license dialogs come up, we will accept them.
  2. When the updates complete, the NuGet Package Manager should now have an empty list.

Add bUnit Package Dependency

bUnit is another NuGet package that we need to test Blazor components. It isn’t currently referenced in our test project, so we need to add that package.

  1. Return to the main NuGet Manager window and select the ‘Browse’ tab.
  2. It starts with a list of the top 20 most popular NuGet packages. This is where to come to find and install any NuGet packages we require.
Fig 6 – NuGet Package Manager Browse
  1. Check the ‘Include prerelease’ box because the bUnit test package is still in Beta.
  2. Type ‘bUnit’ in the ‘Search’ control.
  3. Select the first ‘bUnit by Egil Hansen’ item (this is an umbrella package that includes some of the others). The current package version is v1.0.0-preview-01, but this will change over time.
  4. Then click in the Install button on the far right of the window.
Fig 7 – Install bUnit Package
  1. Click ‘OK’ in the Preview Changes dialog (it may not show if you previous opted out of showing this dialog).
  2. Click ‘I Accept’ in the License Acceptance dialog.
  3. After the installation completes, we can see the bUnit package listed in the ‘Installed’ tab in this window.
Fig 8 – NuGet Package Manager Installed

With the bUnit package installed, we are ready to start using it.

Add Project Reference to Blazor App Project

Currently, our test project is isolated from the Blazor App project that we wish to test. For the test project to reference public types in the Blazor App project, we need to add a project reference to that other project.

  1. Return to the Solution Explorer tool window.
  2. Right click on the ‘Dependencies’ node in the test project again.
  3. Click the ‘Add Project Reference’ menu item.
  4. In the Reference Manager dialog, check the Blazor App project (Blazor.HowTo in our example).
  5. And click the ‘OK’ button to complete the operation.
Fig 9 – Add Project Reference

Once that project reference is added, we can now reference types in that project, like the Index page. So, we are ready to start writing our tests.

After completing all of these changes, our test project in the Solution Explorer should look like this:

Fig 10 – Test Project Structure

We can build both projects now and even run through our only sample test. Everything should build and run successfully.

In conclusions, this lesson went through the steps to:

  • Add a new xUnit project to our existing Blazor App project,
  • Upgrade the xUnit test project to .NET 5.
  • Update existing packages in the xUnit template.
  • Add the bUnit package to our test project.
  • Add a reference from our test project to our application project to access the classes to test.

In the future we will have another lesson on how to create your first bUnit test.

7 thoughts on “How-to: Add bUnit Test Project to Blazor Solution

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s