如何在 Blazor 中修复这个简单的 ElementNotFoundException？答案

【问题标题】：How to fix this simple ElementNotFoundException in Blazor?如何在 Blazor 中修复这个简单的 ElementNotFoundException？
【发布时间】：2021-05-11 13:08:22
【问题描述】：

我正在对 Blazor 应用程序进行单元测试。我得到一个 ElementNotFoundException。我认为造成这种情况的原因是 index.razor 页面中的 if 语句。见下面的代码：

<div class="row">
    <div class="col-12">
        @if ((challenges != null) && (challenges.Count > 0))
        {
            <MultiStepComponent Id="MultiStepContainer" Challenges="@challenges">
                <div class="row p-3">
                    <div class="col-6" id="challengeContainer">
                        @foreach(var c in challenges)
                        {
                            <MultiStepNavigation Name="@c.Title">
                                <h1>@c.Title</h1>
                                <img class="float-left" src="@c.ImagePath" width="200" />
                                @foreach(var sentence in c.Description)
                                {
                                    <p>@sentence</p>
                                }
                            </MultiStepNavigation>
                        }
                    </div>
                    <div class="col-6">
                        <textarea rows="26" cols="120" @bind="input" id="input"></textarea>

                        <button class="btn" id="runBtn" @onclick="RunAsync">Run</button>

                        <br />
                        <textarea rows="10" cols="120" id="output" readonly>@((MarkupString)Output)</textarea>
                    </div>
                </div>
            </MultiStepComponent>
        }
    </div>
</div>

本页后面的代码（index.razor.cs）有如下初始化代码：

protected override async Task OnInitializedAsync()
    {
        jsonRepository = new JSONChallengeRepository();
        challenges = await jsonRepository.GetChallengesAsync();
    }

这个页面的测试在这里：

[Test]
    public async Task Compile_code_Success()
    {
        _codingChallengeService.Setup(c => c.SendInputToCompilerAsync("50+50")).ReturnsAsync("100");
        _testContext.Services.AddScoped(x => _codingChallengeService.Object);
        var razorComponent = _testContext.RenderComponent<Index>();
        razorComponent.Instance.challenges = GetChallenges();

        if ((razorComponent.Instance.challenges != null) && (razorComponent.Instance.challenges.Count > 0))
        {
            var runBtn = razorComponent.FindAll("button").FirstOrDefault(b => b.OuterHtml.Contains("Run"));
            var input = razorComponent.Find("#input");
            input.Change("50+50");
        
            runBtn.Click();
        
            var outputArea = razorComponent.Find("#output");
            var outputAreaText = outputArea.TextContent;
            Assert.AreEqual("100", outputAreaText);
        }

        Assert.IsNotNull(razorComponent.Instance.challenges);
    }

#input 丢失..为什么？？

提前致谢！

【问题讨论】：

如果这是 Bunit，我怀疑 razorComponent.Find("#input") 不是在寻找 id 为“input”的组件。试试 razorComponent.Find("textarea")

标签： c# nunit blazor blazor-webassembly bunit

【解决方案1】：

我猜问题是你分配razorComponent.Instance.challenges属性/字段时不会导致被测组件重新渲染，如果组件没有重新渲染，那么@if ((challenges != null) && (challenges.Count > 0))块内的标记在组件中不显示。

一般情况下，不要通过razorComponent.Instance 改变组件的属性（参数）。如果你真的必须这样做，一定要在之后trigger a render。

相反，pass parameters to the component 通过RenderComponent 或SetParametersAndRender 方法，或通过services injected 进入组件。这将导致组件通过其正常的渲染生命周期方法。

【讨论】：