bUnit's JSInterop has not been configured to handle the call InvokeAsync<GetDeviceInfoResult>

[chanchangreatness]

Hi everyone, i'm trying to create a bUnit test for my component. this is a wrapper for the DevExpress DxDropDownButtonItem.

this is my wrapper component
CbDropDownButton.razor:

<div>
    <DxDropDownButton Text="@ButtonText"
                      Enabled="@Enabled" CssClass="@($"cbDropDownButton {CssClass}")"
                      DropDownToggleCssClass="@DropDownToggleCssClass" DropDownPosition="@GetDropDownPosition(CbDropDownPosition)" DropDownCssClass="@DropDownCssClass"
                      DropDownToggleVisible="@DropDownToggleVisible" IconCssClass="@IconCssClass"
                      @attributes="HtmlAttributes">
        <Items>
            @RenderItems(Items)
        </Items>

    </DxDropDownButton>
</div>
@code {
    [Parameter, EditorRequired]
    public required string ButtonText { get; set; }

    /// <summary>
    /// The content of the drop-down button items.
    /// Use <seealso cref="CbDropDownButtonItem"> components to define individual items.
    /// </summary>
    [Parameter, EditorRequired]
    public required List<SharedUI.Classes.CbDropDownButtonItem> Items { get; set; }

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object>? HtmlAttributes { get; set; }

    [Parameter]
    public string? CssClass { get; set; }

    [Parameter]
    public string? DropDownToggleCssClass { get; set; }

    [Parameter]
    public string? DropDownCssClass { get; set; }

    [Parameter]
    public string? IconCssClass { get; set; }

    [Parameter]
    public bool DropDownToggleVisible { get; set; } = true;

    [Parameter]
    public bool Enabled { get; set; } = true;

    [Parameter]
    public CbDropDownPosition CbDropDownPosition { get; set; } = CbDropDownPosition.Bottom;

    private static DropDownPosition GetDropDownPosition(CbDropDownPosition position)
    {
        switch (position)
        {
            case CbDropDownPosition.Top:
                return DropDownPosition.Top;
            case CbDropDownPosition.Left:
                return DropDownPosition.Left;
            case CbDropDownPosition.Right:
                return DropDownPosition.Right;
            default:
                return DropDownPosition.Bottom;
        }
    }

    private static ButtonIconPosition GetButtonIconPosition(CbButtonIconPosition position)
    {
        switch (position)
        {
            case CbButtonIconPosition.BeforeText:
                return ButtonIconPosition.BeforeText;
            case CbButtonIconPosition.AfterText:
                return ButtonIconPosition.AfterText;
            default:
                return ButtonIconPosition.BeforeText;
        }
    }

    private RenderFragment RenderItems(IEnumerable<SharedUI.Classes.CbDropDownButtonItem> items) => builder =>
    {
        var seq = 0;
        foreach (var item in items)
        {
            builder.OpenComponent<DxDropDownButtonItem>(seq++);
            builder.AddAttribute(seq++, "DropDownContentTemplate", item.DropDownContentTemplate);
            builder.AddAttribute(seq++, "DropDownCssClass", item.DropDownCssClass);
            builder.AddAttribute(seq++, "DropDownToggleCssClass", item.DropDownToggleCssClass);
            builder.AddAttribute(seq++, "DropDownToggleVisible", item.DropDownToggleVisible);
            builder.AddAttribute(seq++, "DropDownVisible", item.DropDownVisible);
            builder.AddAttribute(seq++, "DropDownVisibleChanged", item.OnDropDownVisibleChanged);
            builder.AddAttribute(seq++, "DropDownPosition", GetDropDownPosition(item.CbDropDownPosition));
            builder.AddAttribute(seq++, "Enabled", item.Enabled);
            builder.AddAttribute(seq++, "NavigateUrl", item.NavigateUrl?.ToString());
            builder.AddAttribute(seq++, "Visible", item.Visible);
            builder.AddAttribute(seq++, "Click", item.OnClick);
            builder.AddAttribute(seq++, "Text", item.Text);
            builder.AddAttribute(seq++, "BeginGroup", item.BeginGroup);
            builder.AddAttribute(seq++, "CssClass", $"cbDropDownButtonItem {item.CssClass}");
            builder.AddAttribute(seq++, "IconCssClass", item.IconCssClass);
            builder.AddAttribute(seq++, "IconPosition", GetButtonIconPosition(item.CbButtonIconPosition));

            if (item.HtmlAttributes is not null)
            {
                builder.AddMultipleAttributes(seq++, item.HtmlAttributes);
            }

            // Recursively render children, if any
            if (item.ChildItems is not null && item.ChildItems.Any())
            {
                builder.AddAttribute(seq++, "Items", (RenderFragment)(contentBuilder =>
                {
                    contentBuilder.AddContent(seq++, RenderItems(item.ChildItems));
                }));
            }

            builder.CloseComponent();
        }
    };
}

and this is my bUnit test:

public class CbDropDownButtonTests : BunitContext
{
    private static List<CbDropDownButtonItem> _testItems = new();

    public CbDropDownButtonTests()
    {
        Services.AddDevExpressBlazor();
        JSInterop.Mode = JSRuntimeMode.Loose;

        var rootModule = JSInterop.SetupModule("./_content/DevExpress.Blazor/modules/dx-blazor-all.js?v=25.1.5.0");

        // 2. Mock the function inside the module
        rootModule.Mode = JSRuntimeMode.Strict;
        rootModule.Setup<DeviceInfo>("getDeviceInfo", _ => true).SetResult(new DeviceInfo(false));

        _testItems = new()
        {
            new CbDropDownButtonItem
            {
                Text = "Test",
                Enabled = true,
                Visible = true,
                BeginGroup = false,
                CssClass = "item-open",
                IconCssClass = "dx-icon dx-icon-open",
                NavigateUrl = "example.com/open",
                DropDownCssClass = "item-open-dropdown",
                DropDownToggleCssClass = "item-open-toggle",
                DropDownToggleVisible = true,
                DropDownVisible = false,
                CbDropDownPosition = CbDropDownPosition.Bottom,
                CbButtonIconPosition = CbButtonIconPosition.BeforeText,
                HtmlAttributes = new () { ["data-item"] = "test", ["aria-label"] = "test-lbl" },
                OnClick = EventCallback.Factory.Create<MouseEventArgs>(this, (MouseEventArgs e) => OnItemClick(e)),
                OnDropDownVisibleChanged = EventCallback.Factory.Create<bool>(this, (bool v) => OnItemDropDownVisibleChanged("Test", v))
            }
        };
    }

    [Fact(DisplayName = "Component renders with required Parameters")]
    public void ComponentRendersWithRequiredParameters()
    {
        // Arrange
        var cut = Render<CbDropDownButton>(parameters => parameters
            .Add(p => p.ButtonText, "Test")
            .Add(p => p.Items, _testItems)
        );
        // Act
        var button = cut.Find("button.custom-dropdown-button");
        var dropdownItems = cut.FindAll("li.dxbl-btn-dropdown-list-item");
        // Assert
        Assert.NotNull(button);
        Assert.Equal("Test", button.TextContent);
        Assert.NotEmpty(dropdownItems);
    }
}

when im debugging, this is what the message says:

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

    InvokeAsync<GetDeviceInfoResult>("UtilsModule.getDeviceInfo", False, True)

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

    Setup<GetDeviceInfoResult>("UtilsModule.getDeviceInfo", False, True)
or the following, to match any arguments:
    Setup<GetDeviceInfoResult>("UtilsModule.getDeviceInfo", _ => true)

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

is there anyway i could fix it?

[linkdotnet]

There are multiple ways. I am no expert on DevExpress, so can only give "general" advise here.

First and foremost, you could just mock the call as described, You did getDeviceInfo but the JS Call in question UtilsModule.getDeviceInfo. Assuming DevExpress defines those types like:

export const UtilsModule = {
  getDeviceInfo() { ... }
}

Now here a bit of salt. There is a different route you can take: Substituting (mocking) components. If you have a unit test, you don't want to rely on 3rd party behavior. So you can create your own fake/stub of DxDropDownButton that mimicks the public API (aka ParameterAttribute and so on). Bring the 3rd party component under your control!

[chanchangreatness]

Thanks, the substitution of components really helped.