Stack Overflow in Blazor BUnit Test for Component Rendering Based on Viewport Size

[chiptech-mitchell]

I'm encountering a stack overflow issue when running a BUnit test for a Blazor component (AppBar) that conditionally renders elements based on the viewport size. The test that causes the stack overflow involves large viewports (Xxl, Xl, Lg, Md), while the test for small viewports (Sm, Xs) passes without issues.

[Theory]
[InlineData(Breakpoint.Xxl)]
[InlineData(Breakpoint.Xl)]
[InlineData(Breakpoint.Lg)]
[InlineData(Breakpoint.Md)]
public void AppBar_OnLargeViewports_RendersAppTools(Breakpoint breakpoint)
{
    // Arrange
    const string user = "TEST USER";
    var authContext = this.AddTestAuthorization();
    authContext.SetAuthorized(user);

    _mockBrowserViewportService
        .Setup(o => o.IsBreakpointWithinReferenceSizeAsync(It.IsAny<Breakpoint>(), It.IsAny<Breakpoint>()))
        .ReturnsAsync(true);

    // Act
    var cut = RenderComponent<AppBar>();
    SetViewportBreakpoint(breakpoint);
    cut.Render();

    // Assert
    Assert.NotNull(cut);
    Assert.NotNull(cut.Find("search-bar-container"));
    Assert.NotNull(cut.Find("#accountMenu"));
}

[Theory]
[InlineData(Breakpoint.Sm)]
[InlineData(Breakpoint.Xs)]
public void AppBar_OnSmallViewports_DoesNotRenderAppTools(Breakpoint breakpoint)
{
    // Arrange
    const string user = "TEST USER";
    var authContext = this.AddTestAuthorization();
    authContext.SetAuthorized(user);

    _mockBrowserViewportService
        .Setup(o => o.IsBreakpointWithinReferenceSizeAsync(It.IsAny<Breakpoint>(), It.IsAny<Breakpoint>()))
        .ReturnsAsync(false);

    // Act
    var cut = RenderComponent<AppBar>();
    SetViewportBreakpoint(breakpoint);
    cut.Render();

    // Assert
    Assert.NotNull(cut);
    Assert.Throws<ElementNotFoundException>(() => cut.Find("search-bar-container"));
    Assert.Throws<ElementNotFoundException>(() => cut.Find("#accountMenu"));
}

 private void SetViewportBreakpoint(Breakpoint breakpoint)
 {
     foreach (var observer in _browserViewportObservers)
     {
         var eventArgs = new BrowserViewportEventArgs(Guid.NewGuid(), new BrowserWindowSize(), breakpoint, true);
         observer.NotifyBrowserViewportChangeAsync(eventArgs);
     }
 }

The test breaks when trying to render the component but I can't figure out what is going on, any help would be appreciated. This is my component, if it will help.

<!-- Small displays -->
<MudHidden Breakpoint="Breakpoint.MdAndUp">
    <AppLogo DarkModeEnabled="@DarkModeEnabled" />
    <MudSpacer />
    <MudIconButton OnClick="OnDrawerToggle" Icon="@Icons.Material.Rounded.Notes" Color="Color.Inherit" Edge="Edge.Start" />
</MudHidden>

<!-- Larger displays -->
<MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
    <AppLogo DarkModeEnabled="@DarkModeEnabled" />
    <MudSpacer />
    <div class="search-bar-container">
        <SearchBar />
    </div>
    <AppTools />
</MudHidden>

@code
{
    [Parameter] public bool DarkModeEnabled { get; set; }
    [Parameter] public EventCallback<MouseEventArgs> OnDrawerToggle { get; set; }
}

[linkdotnet]

Hey @chiptech-mitchell,

I saw you closed the ticket. Was this on accident or did you find a resolution?
If so, I'd be interested in if you don't mind sharing.

[chiptech-mitchell]

Unfortunately while it is fixed, I am not entirely sure what was wrong or how it was fixed. I ended up adding a custom disposable test base which harnesses the TestContext with

Context.JSInterop.Mode = JSRuntimeMode.Loose;
Context.Services.AddMudServices(options =>
{
    options.SnackbarConfiguration.ShowTransitionDuration = 0;
    options.SnackbarConfiguration.HideTransitionDuration = 0;
});

but removing either of them doesn't seem to break it the same. I closed it since I didn't think it would show anything helpful to others and didn't want to seem like an idiot.

[linkdotnet]

I closed it since I didn't think it would show anything helpful to others and didn't want to seem like an idiot.

Yeah don't worry about that - you are not looking foolish.

Is there any state that persists between test runs?

[chiptech-mitchell]

No state persistence that I can see, which was why it was so strange.