Setting render mode

[travis-practiceprofiles]

Hi. I've got a project that uses server-side rendering. When bUnit renders components for this project, I get an error reading, "System.InvalidOperationException : JavaScript interop calls cannot be issued at this time. This is because the component is being statically rendered. When prerendering is enabled, JavaScript interop calls can only be performed during the OnAfterRenderAsync lifecycle method."

I am aware that the solution to this is supposed to be to render using an appropriate render mode (in this case RenderMode.InteractiveServer), and the bUnit documentation addresses this issue here: https://bunit.dev/docs/interaction/render-modes.html?tabs=csharp

However, that documentation seems to be very out of date. It uses RenderComponent, instead of the unified Render function from the bunit 2 release, and also references TestContext which has been replaced by BunitContext. Neither SetRendererInfo nor SetAssignedRenderMode seem to exist in recent versions of bUnit. I have tried using older versions of bUnit, but so far I have not found a version that includes those functions.

So, what is the method that should be used to control component (or page) rendering during testing under the current release of bunit? (And perhaps the documentation should say which version of bUnit it applies to, if not the current version?)

[linkdotnet]

Hey @travis-practiceprofiles - can you send the component under test and the test itself?
Also the stack-trace of the example would be great!

bUnit - strictly speaking - doesn't adhere directly to your rendermode in your App.razor.

[travis-practiceprofiles]

And if I remove the NumberInput component from my component, it will render successfully. But since that component comes from a library, I don't have a lot of control over exactly how it renders.

[linkdotnet]

Likely the simplest solution is to create a fake/stub of the NumberInput: https://bunit.dev/docs/providing-input/substituting-components.html?tabs=moq

Basically providing your NumberInputFake: ComponentFactories.Add<NumberInput, NumberInputFake>. We even have an extension for doing so automatically: https://bunit.dev/docs/extensions/bunit-generators.html

The fake can look something like:

public sealed class NumberInputFake<TValue> : ComponentBase
{
     // For the two-way binding
    [Parameter] public TValue? Value { get; set; }
    [Parameter] public EventCallback<TValue?> ValueChanged { get; set; }
    [Parameter] public Expression<Func<TValue?>>? ValueExpression { get; set; }

    // If you need them
    [Parameter] public string? Placeholder { get; set; }
    [Parameter] public bool Disabled { get; set; }
    [Parameter] public string? Class { get; set; }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        var seq = 0;

        builder.OpenElement(seq++, "input");
        builder.AddAttribute(seq++, "type", "number");

        if (Value is not null)
            builder.AddAttribute(seq++, "value", BindConverter.FormatValue(Value));

        builder.AddAttribute(seq++, "onchange",
            EventCallback.Factory.CreateBinder<TValue?>(
                this,
                async v =>
                {
                    Value = v;
                    await ValueChanged.InvokeAsync(v);
                },
                Value));

        builder.CloseElement();
    }
}

This version has 0 javascript and therefore will not lead to the issue you were seeing.

PS: The docs are not really outdated in the sense that they are not valid anymore - we didn't update the name there is it just markdown. I will do that afterward.

[travis-practiceprofiles]

The docs are not really outdated in the sense that they are not valid anymore - we didn't update the name there is it just markdown. I will do that afterward.

The issue there isn't that the names are out of date. It's that SetRendererInfo and SetAssignedRenderMode both seem to be missing, with no replacement.

[linkdotnet]

I am not sure what you mean - both methods are available and are actively used in our test suite as well:

var cut = Render<ComponentThatPrintsAssignedRenderMode>(ps => ps.SetAssignedRenderMode(RenderMode.InteractiveServer));

[linkdotnet]

They are available with net9.0 onwards