Using bUnit to mock IJSRuntime when passing a DotNetObject reference to the JavaScript method.

[MorneZaayman]

I have the following code in my component that calls uses IJSRuntime to call a JavaScript function and passes in a DotNetObject reference as an argument:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await _jsRuntime.InvokeVoidAsync("select2", $"#{Id}", PlaceHolder, dotNetObjectReference);
}

In my test, I have tried setting this up as:
_ = JSInterop.SetupVoid("select2", "#TestLabel", "Please select an option...", It.IsAny<DotNetObjectReference<BuiInputSelect<string>>>()).SetVoidResult(); (It comes from the Moq library).

When trying to run the test, the following exception is thrown when calling InvokeVoidAsync.

Bunit.JSRuntimeUnhandledInvocationException: 'bUnit's JSInterop has not been configured to handle the call:

InvokeVoidAsync("select2", "#TestLabel", "Please select an option...", Microsoft.JSInterop.DotNetObjectReference`1[Base.UI.Components.Forms.InputSelect.BuiInputSelect`1[System.String]])

Configure bUnit's JSInterop to handle the call with following:

SetupVoid("select2", "#TestLabel", "Please select an option...", Microsoft.JSInterop.DotNetObjectReference`1[Base.UI.Components.Forms.InputSelect.BuiInputSelect`1[System.String]])

or the following, to match any arguments:
SetupVoid("select2", _ => true)

The setup methods are available on an instance of the BunitJSInterop or BunitJSModuleInterop type. The standard BunitJSInterop is available through the TestContext.JSInterop property, and a BunitJSModuleInterop instance is returned from calling SetupModule on a BunitJSInterop instance.

SetupVoid("select2", "#TestLabel", "Please select an option...", Microsoft.JSInterop.DotNetObjectReference`1[Base.UI.Components.Forms.InputSelect.BuiInputSelect`1[System.String]]) is invalid C# code, and I would prefer not to use SetupVoid("select2", _ => true).

Am I missing something, or is this not currently supported?

[linkdotnet]

Hey @MorneZaayman

the short answer is that you can't use the Moq call to setup the Mock (It.IsAny<DotNetObjectReference<BuiInputSelect<string>>>()) as bUnit doesn't have an understanding of what. Is.IsAny means.

There are two ways:

1. Either you completely register a mock of IJSRuntime in your test:

var jsruntime = Mock.Of<IJSRuntime>();
// This replaces the Bunit version of the JSInterop with the Mock
Services.AddScoped(_ => jsruntime.Object);
jsruntime.Setup(s => s.InvokeAsync<IJSVoidResult>("select2", "#TestLabel", "Please select an option...", It.IsAny<DotNetObjectReference<BuiInputSelect<string>>>());

2. Use the InvocationMatcher (the _ => true part) and fine tune:

JSInterop.SetupVoid(m => m is { Identifier: "select2", Arguments.Count: 3 }
                         && m.Arguments[0] as string == "#TestLabel"
                         && m.Arguments[1] as string == "Please select an option...")
    .SetVoidResult();

[MorneZaayman]

Thank you for the detailed reply. I modified your second example to ensure that IJSRuntime is called with the correct type for the third argument, but otherwise it works perfectly.

 _ = JSInterop.SetupVoid(m => m is { Identifier: "select2", Arguments.Count: 3 }
              && (m.Arguments[0] as string) == "#TestLabel"
              && (m.Arguments[1] as string) == "Please select an option..."
              && (m.Arguments[2].GetType()) == typeof(DotNetObjectReference<BuiInputSelect<string>>))
 .SetVoidResult();