Writing Tests in C# for Blazor Components

Testing Blazor components is a different from testing regular C# classes: Blazor components are rendered, they have the Blazor component life cycle, during which we can provide input to them and where they produce output.

Use bUnit to render the component you want to test, pass in parameters to it, inject services into it, and access the rendered component instance and the markup it has produced.

Rendering a component happens through bUnit's TestContext, and the result of the rendering, a IRenderedComponent<TComponent>, provides access to the component instance, and the markup produced by the component.

Creating a Basic Test

This is a simple example, that tests the following <HelloWorld> component:

<h1>Hello world from Blazor</h1>

using Xunit;
using Bunit;

namespace Bunit.Docs.Samples
{
  public class HelloWorldTest
  {
    [Fact]
    public void HelloWorldComponentRendersCorrectly()
    {
      // Arrange
      using var ctx = new TestContext();

      // Act
      var cut = ctx.RenderComponent<HelloWorld>();

      // Assert
      cut.MarkupMatches("<h1>Hello world from Blazor</h1>");
    }
  }
}

The following happens in the test above:

  1. New up the disposable TestContext, and assign it using the using var syntax, to avoid unnecessary indention.
  2. Render the <HelloWorld> component using TestContext, which we do through the RenderComponent<TComponent>(ComponentParameter[]) method. We will cover passing parameters to components elsewhere.
  3. Verify the rendered markup from the <HelloWorld> component using the MarkupMatches method, which performs a semantic comparison of the expected markup with the rendered markup.
Tip

Learn more about how the semantic HTML/markup comparison in bUnit work, and how to customize it on the Customizing the Semantic HTML Comparison page.

Tip

In bUnit tests, we like to use the abbreviation CUT, short for "component under test", to indicate the component that is being tested. This is inspired by the common testing abbreviation SUT, short for "system under test".

Remove Boilerplate Code from Tests

We can remove some boilerplate code from each test by making the TestContext implicitly available to the test class, so we do not have to have using var ctx = new Bunit.TestContext(); in every test. This can be done like this:

using Xunit;
using Bunit;

namespace Bunit.Docs.Samples
{
  public class HelloWorldImplicitContextTest : TestContext
  {
    [Fact]
    public void HelloWorldComponentRendersCorrectly()
    {
      // Act
      var cut = RenderComponent<HelloWorld>();

      // Assert
      cut.MarkupMatches("<h1>Hello world from Blazor</h1>");
    }
  }
}

Since xUnit instantiates test classes for each execution of test methods inside them and disposes them after each test method has run, we simply inherit from TestContext, and methods like RenderComponent<TComponent>(ComponentParameter[]) can now be called directly from each test, as seen in the listing above.

Further Reading

With the basics out of the way, we will next look at how to pass parameters and inject services into our components under test, and after that, cover in more details the various ways we can verify the outcome of a rendering.