The invocation of 'render' with the argument [Microsoft.AspNetCore.Components.ElementReference] was not expected.

[Naganathan]

We tried to pass ElementReference obj in MockJSRuntime to execute the test case but we are facing method invocation issue related to ElementReference obj.

The following code example has used as a component for our application. element property has set as a parameter in js invoke async calls used in OnAfterRenderAsync() method.

@using Microsoft.JSInterop; 
@inject IJSRuntime jsRuntime;

<div @ref="@element" id="canvas_layer_div" style="width: 1000px;height: 700px;position:relative;overflow:hidden;background:#ededed">
    <svg id="canvas_layer_svg" width="1000px" height="1000px" xmlns="http://www.w3.org/2000/svg">
        @if (@isRender)
        {
            <rect id="node" x="100px" y="100px" width="100px" height="100px" fill="blue" stroke-width="5"></rect>
        }
    </svg>
</div>

@code{
    public ElementReference element;
    public bool isRender { get; set; }
    [Parameter] public Task<bool> TextService { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (TextService != null)
            isRender = await TextService;
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            bool obj = await jsRuntime.InvokeAsync<bool>("render", new object[] { element });
            isRender = obj;
            StateHasChanged();
        }
    }
}

The following code example has used as bUnit test case to run the test. While rendering the component, we got that exception and unable to run the test case.

 public void SamplebUnit_Does_Not_Renders_Rect_When_SzObj_isRendering_Is_False()
        {
            // Add the mock js runtime to the test context
            var jsMock = Services.AddMockJsRuntime(JsRuntimeMockMode.Strict);

            jsMock.Setup<bool>("render", new { }).SetResult(true);

            // Render the component under test
            var cut = RenderComponent<SampleBunit>();

            // Finds the <rect> element inside the <svg> element
            var rectElms = cut.FindAll("svg");
            Assert.AreEqual(0, rectElms.Count);
        }

We are facing the below issue in bunit test case.

Please find the sample here.
Sample.zip

[egil]

Hey @Naganathan

I have a few comments on your sample:

1. Use beta-10 or later of bUnit if you are targeting .net5. Otherwise you have to use netcoreapp3.1.
2. When calling the invokeasync on jsinterop, just pass the parameters directly, not through an array, e.g.: await jsRuntime.InvokeAsync<bool>("render", element);
3. When you are using NUnit, dont both inherit from Bunit.TestContext and instantiate a TestContext like you are. Add the suggestion base class as shown here, and just use that: https://bunit.egilhansen.com/docs/getting-started/writing-csharp-tests.html?tabs=nunit#remove-boilerplate-code-from-tests
4. If you do not need to verify that a reference to a particular element was passed, you can setup the call like this: jsMock.Setup<bool>("render", _ => true).SetResult(true);

The complete test file look like this:

using SampleBunitTest.Pages;
using Bunit;
using Bunit.Rendering;
using Bunit.TestDoubles.JSInterop;
using Microsoft.AspNetCore.Components;
using NUnit.Framework;
using System;
using System.Threading.Tasks;

namespace BlazorBunitTest
{
    public abstract class BunitTestContext : ITestContext, IDisposable
    {
        private Bunit.TestContext _context;

        public ITestRenderer Renderer => _context?.Renderer ?? throw new InvalidOperationException("NUnit has not started executing tests yet");

        public TestServiceProvider Services => _context?.Services ?? throw new InvalidOperationException("NUnit has not started executing tests yet");

        public void Dispose()
        {
            _context?.Dispose();
            _context = null;
        }

        [SetUp]
        public void Setup() => _context = new Bunit.TestContext();

        [TearDown]
        public void TearDown() => Dispose();

        public IRenderedComponent<TComponent> RenderComponent<TComponent>(params ComponentParameter[] parameters) where TComponent : IComponent
            => _context?.RenderComponent<TComponent>(parameters) ?? throw new InvalidOperationException("NUnit has not started executing tests yet");

        public IRenderedComponent<TComponent> RenderComponent<TComponent>(Action<ComponentParameterBuilder<TComponent>> parameterBuilder) where TComponent : IComponent
            => _context?.RenderComponent<TComponent>(parameterBuilder) ?? throw new InvalidOperationException("NUnit has not started executing tests yet");
    }

    public class BlazorBarcodeImplicitContextTest : BunitTestContext
    {
        [Test]
        public void SamplebUnit_Does_Not_Renders_Rect_When_SzObj_isRendering_Is_False()
        {
            // Add the mock js runtime to the test context
            var jsMock = Services.AddMockJSRuntime(JSRuntimeMockMode.Strict);

            jsMock.Setup<bool>("render", _ => true).SetResult(true);

            // Render the component under test
            var cut = RenderComponent<SampleBunit>();

            // Finds the <rect> element inside the <svg> element
            var rectElms = cut.FindAll("svg");
            Assert.AreEqual(0, rectElms.Count);
        }
    }
}

Obviously, you move the BunitTestContext into its own file and reuse that with all your test classes.

Hope this helps.