BUnit does not work with Blazorise Components

[johniwasz]

Testing any component that that includes a component from Blazorise fails with:

System.InvalidOperationException : Cannot consume scoped service 'Microsoft.AspNetCore.Components.IComponentActivator' from singleton 'Bunit.Rendering.WebTestRenderer'.

OR:

System.InvalidOperationException : Cannot provide a value for property 'JSModule' on type 'Blazorise.Button'. There is no registered service of type 'Blazorise.Modules.IJSButtonModule'.

Example:
Testing this component:

@using Blazorise

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<Button Clicked="IncrementCount">Click Me (Blazorise)</Button>

With this test:

        [Fact]
        public void CounterStartsAtZero()
        {            
            // Arrange
            var cut = RenderComponent<Counter>();

            // Assert that content of the paragraph shows counter at zero
           cut.Find("p").MarkupMatches("<p role=\"status\">Current count: 0</p>");
        }

Results in this output:

 System.InvalidOperationException : Cannot provide a value for property 'JSModule' on type 'Blazorise.Button'. There is no registered service of type 'Blazorise.Modules.IJSButtonModule'.

Or this test:

        [Fact]
        public void CounterStartsAtZero()
        {
            Services
                .AddBlazorise(options =>
                {
                    options.Immediate = true;
                })
                .AddBootstrapProviders()
                .AddFontAwesomeIcons();
            
            // Arrange
            var cut = RenderComponent<Counter>();

            // Assert that content of the paragraph shows counter at zero
           cut.Find("p").MarkupMatches("<p role=\"status\">Current count: 0</p>");
        }

Results in this output:

 System.InvalidOperationException : Cannot consume scoped service 'Microsoft.AspNetCore.Components.IComponentActivator' from singleton 'Bunit.Rendering.WebTestRenderer'.

Expected behavior:

This line results in successful instantiation of the Counter componet:

        var cut = RenderComponent<Counter>();

Version info:

• bUnit version: 1.18.4
• .NET Runtime and Blazor version: .NET 7, Microsoft.AspNetCore.Components.WebAssembly 7.0.3
• OS type and version: Windows 10

Additional context:

A repo with a reproduction of this error can be found here:

https://github.com/johniwasz/blazorise-bunit-repro

[egil]

That's odd, since I know the folks from Blazorise (@Megabit) use bUnit to test Blazorise with themselves 🙂

Perhaps @stsrki has a tutorial on how to get started testing components that use Blazorise components.

[stsrki]

TBH, it didn't come to mind. But we might do something about that. @David-Moreira, what do you think?

[egil]

The folks over at Blazored has an example of such a package, https://www.nuget.org/packages/Blazored.LocalStorage.TestExtensions, if you need inspiration.

[stsrki]

We would probably have to have multiple different bUnit packages for each of our supported CSS providers(Bootstrap, Tailwind, Bulma, etc.).

[johniwasz]

Thanks for the test mocks. I couldn’t find anything about using bunit with Blazor on StackOverflow or at Blazorize.com. I’ll try them out later this week.

[David-Moreira]

TBH, it didn't come to mind. But we might do something about that. @David-Moreira, what do you think?

I guess it'd be a good addition.

[johniwasz]

I used the mocks from the sample provided. It worked for a component that displays Alerts, but failed for a model dialog and others with:

InvalidOperationException: Cannot provide a value for property 'ModalContext' on type 'Blazorise.Bootstrap5.Modal'. There is no registered service of type 'Blazorise.ModalSharedContext'._

ModalSharedContext is an internal class with no interface. I cannot mock it and I don't see it included in Blazorise.config:
https://github.com/Megabit/Blazorise/blob/master/Tests/Blazorise.Tests/Helpers/BlazoriseConfig.cs

You can find the tests that generate this error here marked with

[Fact(Skip = "Blazorise mocks not working")]

https://github.com/johniwasz/whetstone.chatgpt/tree/main/src/examples/blazor/Whetstone.ChatGPT.Blazor.Test

I cloned and attempted to load the Blazorise solution in an effort to dig through how ModalSharedContext is used.
https://github.com/Megabit/Blazorise

However, I ran into a loading issue. I'm using Visual Studio 2022 Professional on Windows 10. The solution load hung on the following. I let it sit for ~20 min. before giving up.

How do consumers of Blazorise test with bunit?

[stsrki]

@johniwasz expect it to be exposed in the coming 1.2.2 release Megabit/Blazorise#4662

As for the VS loading issue. Usually, it helps if you delete .vs folder and delete obj/bin folders.