Writing Tests in C# for Blazor Components

Testing Blazor components is a little 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 they can produce output.

Use bUnit to render the component under test, pass in its parameters, inject required services, and access the rendered component instance and the markup it has produced.

Rendering a component happens through bUnit's TestContext. 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 test above does the following:

  1. Creates a new instance of the disposable bUnit TestContext, and assigns it to ctx variable using the using var syntax to avoid unnecessary source code indention.
  2. Renders the <HelloWorld> component using TestContext, which is done through the RenderComponent<TComponent>(ITestRenderer, Action<ComponentParameterCollectionBuilder<TComponent>>) method. We cover passing parameters to components on the Passing Parameters to Components page.
  3. Verifies the rendered markup from the <HelloWorld> component using the MarkupMatches method. The MarkupMatches method performs a semantic comparison of the expected markup with the rendered markup.
Tip

Learn more about how the semantic HTML/markup comparison in bUnit works, 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 don't 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 the test methods inside them, and disposes of them after each test method has run, we simply inherit from TestContext, and methods like RenderComponent<TComponent>(ITestRenderer, Action<ComponentParameterCollectionBuilder<TComponent>>) can then be called directly from each test. This is seen in the listing above.

Important

All the examples in the documentation explicitly new up a TestContext, i.e. using var ctx = new TestContext(). If you are using the trick above and have your test class inherit from TestContext, you should NOT new up a TestContext in test methods also.

Simply call the test contest's methods directly, as they are available in your test class.

For example, var cut = ctx.RenderComponent<HelloWorld>();
becomes var cut = RenderComponent<HelloWorld>();.

Further Reading

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