Exception: The render handle is not yet assigned.

[MLHN01]

Hi,
I have encountered an error that I can not explain.

I created a minimal example of my problem.

There is a TestComponent.razor which invokes a EventCallback on a button click. Its defined like this:

@namespace UnitTestGrid.Components

@inherits ComponentBase

<div>

    <h3>Test Component</h3>
    
    <button id="TheButton" @onclick="() => InvokeEventCallback()"></button>

</div>

@code{

    [Parameter]
    public bool IsClicked { get; set; } = false;

    [Parameter]
    public EventCallback<bool> IsClickedChanged { get; set; }



    public async Task InvokeEventCallback()
    {
        await IsClickedChanged.InvokeAsync(true);
    }
}

I want to test it by simulate the click with bUnit like this:

@using System
@using System.Collections.Generic
@using Bunit
@using UnitTestGrid.Components

@namespace TestProject1

@attribute [TestClass]

@code{

    public bool IsClicked { get; set; } = false;


    [TestMethod]
    public void TestMethod1()
    {
        using var ctx = new Bunit.TestContext();

        var cut = ctx.Render<TestComponent>(
            @<TestComponent 
                @bind-IsClicked="@IsClicked">
            
            </TestComponent>
        );

        cut.Find("#TheButton").Click();

        Assert.AreEqual(true, cut.Instance.IsClicked);

    }

    [TestMethod]
    public void TestMethod2()
    {
        using var ctx = new Bunit.TestContext();

        var cut = ctx.Render<TestComponent>(@<TestComponentWrapper></TestComponentWrapper>);

        cut.Find("#TheButton").Click();

        Assert.AreEqual(true, cut.Instance.IsClicked);
    }
}

As you can see in "TestMethod1" i try to render the component directly and bind the "IsClicked" attribute from my test class. On run I get the this exception: "System.InvalidOperationException: The render handle is not yet assigned." for "TestMethod1".

In "TestMethod2" i wrapped my component in a simple Razor file like this:

@using UnitTestGrid.Components
@using System
@using Bunit

<TestComponent 
    @bind-IsClicked="@IsClickedWrapper">
            
</TestComponent>


@code{

    public bool IsClickedWrapper { get; set; } = false;

}

In this case i dont get this exception at all and the test runs perfectly. In my project use case it would be much cleaner to test my component like in "TestMethod1". Have i missed something ? Whats the difference of these two cases?

I would appreciate any explanation for this.
Thanks!

[linkdotnet]

Hey @MLHN01 ,

the reason you are seeing the issue is that your test-razor file is inheriting from the "default" ComponentBase class.
If you use the TestContext from bUnit you will a) erase the bug and b) have less boiler-plate code:

@using System
@using System.Collections.Generic
@using Bunit
@using UnitTestGrid.Components

@inherits Bunit.TestContext
@attribute [TestClass]

@code{

[TestMethod]
public void TestMethod1()
{
    var isClicked = false;

    var cut = Render<TestComponent>(
        @<TestComponent
    @bind-IsClicked="@isClicked">

        </TestComponent>
        );

    cut.Find("#TheButton").Click();

    Assert.IsTrue(isClicked);

}

That will work. As a note to us (@egil), we should consider removing all of those var ctx = new TestContext() code from the docs, especially when used with the razor files. Currently the docs state that inheriting from TestContext should be the default, but the examples still are newing up instances every time.

[MLHN01]

Thanks for your reply!

That fixed the error i had. But I need to rerender the component with "cut.Render()" after the click. Otherwise the value won't change.

But that's not the matter. I'm glad that it fixes my problem!

[linkdotnet]

That's odd. Event callbacks automatically trigger a rerender and that action should be done almost immediately.