C# 如何在Blazor中修复这个简单的ElementNotFoundException？

我正在对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>

此页面的测试如下所示：

[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);
    }

[测试]
公共异步任务编译\代码\成功（）
{
_codingChallengeService.Setup（c=>c.SendInputToCompilerAsync（“50+50”））.ReturnsAsync（“100”）；
_testContext.Services.AddScoped（x=>\u codingChallengeService.Object）；
var razorComponent=_testContext.RenderComponent（）；
razorComponent.Instance.challenges=GetChallenges（）；
if（（razorComponent.Instance.challenges！=null）&（razorComponent.Instance.challenges.Count>0））
{
var runBtn=razorComponent.FindAll（“按钮”）.FirstOrDefault（b=>b.OuterHtml.Contains（“运行”）；
var input=razorComponent.Find（“#input”）；
输入。变更（“50+50”）；
runBtn.Click（）；
var outputArea=razorComponent.Find（“#output”）；
var outputAreaText=outputrea.TextContent；
Assert.AreEqual（“100”，输出文本）；
}
Assert.IsNotNull（razorComponent.Instance.challenges）；
}

#输入丢失..为什么

---

提前谢谢

我猜问题在于，当您分配

razorComponent.Instance.challenges

property/field时，您不会导致被测组件重新呈现，如果组件没有重新呈现，则不会显示组件中

@if（（challenges！=null）&&（challenges.Count>0））块中的标记

通常，不要通过
razorComponent.Instance
修改组件的属性（参数）。如果你真的必须这样做，一定要在你之后

而是通过
RenderComponent
或方法，或通过导入组件。这将导致组件通过其正常的渲染生命周期方法。
如果是Bunit，我怀疑razorComponent.Find（#input”）没有查找id为“input”的组件。尝试razorComponent.Find（“textarea”）
[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);
    }