Skip to main content
All docs
V24.1

Test Components with bUnit

  • 3 minutes to read

This article shows how you can add unit testing to your Blazor application. The testing framework is bUnit. The example tests a custom component that contains DevExpress Blazor UI components.

DevExpress bUnit

View Example: Test DevExpress Blazor components with bUnit

Important

The DevExpress support team cannot assist you with testing environment setup. For additional information, please review Limitations on DevExpress Support Services. If you experience issues, make sure that your testing environment works without DevExpress components. Try looking for a solution in online resources such as StackOverflow or bUnit forum.

Follow the steps below to run bUnit tests in a project that includes DevExpress Blazor components:

  1. Set up a project in which to add tests. The following resources may be helpful:

  2. In the new project, create a class and reference the DevExpress.Blazor.Internal namespace.

  3. Copy all class members from the following GitHub repository: https://github.com/DevExpress-Examples/blazor-bunit-tests. These members mock internal dependencies so that it is possible to render our Blazor components with bUnit.

    Note

    The mock class relies on internal implementation and may stop working after you update project dependencies. If you face any issues with internal services or the test project gives you build errors, make sure that you use the latest implementation of the mock class from GitHub.

  4. You can now write tests. We recommend that you use public API to test your usage scenarios instead of relying on the component internal structure as it may change after you upgrade project dependencies.

The following snippet renders a Blazor component that contains DxGrid and DxTreeView, and checks that the Grid component applies the filter after a user selects a TreeView node:

using Bunit;
using DxTestProject.Pages;
using System;
using Xunit;
using Microsoft.Extensions.DependencyInjection;
using DevExpress.Blazor;

namespace DevExpressBunit.Test {
    public class GridApplyFilter : IDisposable {
        public TestContext Context { get; }
        public GridApplyFilter() {
            Context = new TestContext();
            Context.Services.AddOptions();
            Context.AddDevExpressBlazorTesting();
        }
        [Fact]
        public void CheckIfNodeClickAppliesFilter() {
            // Render the component with DevExpress Blazor components
            var cut = Context.RenderComponent<Grid_ApplyFilter>();
            // Obtain an instance of DxTreeView and DxGrid
            var treeview = cut.FindComponent<DxTreeView>().Instance;
            var grid = cut.FindComponent<DxGrid>().Instance;
            // Select a node and check the number of rows currently displayed in the Grid
            cut.InvokeAsync(() => treeview.SelectNode(x => x.Text == "Filter by date"));
            Assert.Equal(1, grid.GetVisibleRowCount());
            cut.InvokeAsync(() => treeview.SelectNode(x => x.Text == "Filter by temperature"));
            Assert.Equal(3, grid.GetVisibleRowCount());
            cut.InvokeAsync(() => treeview.SelectNode(x => x.Text == "Filter by precipitation"));
            Assert.Equal(6, grid.GetVisibleRowCount());
        }
        public void Dispose() {
            Context.Dispose();
        }
    }
}