Testa Razor komponenter i ASP.NET Core Blazor

Av Egil Hansen

Att testa Razor komponenter är en viktig aspekt av att släppa stabila och underhållsbara Blazor appar.

För att testa en Razor-komponent är komponenten under test (CUT):

• Renderas med relevanta indata för testet.
• Beroende på vilken typ av test som utförs, eventuellt beroende på interaktion eller ändring. Händelsehanterare kan till exempel utlösas, till exempel en onclick händelse för en knapp.
• Inspekterad med avseende på förväntade värden. Ett test godkänns när ett eller flera inspekterade värden matchar de förväntade värdena för testet.

Testmetoder

Två vanliga metoder för att testa Razor komponenter är testning från slutpunkt till slutpunkt (E2E) och enhetstestning:

• Enhetstestning: Enhetstester skrivs med ett enhetstestbibliotek som tillhandahåller:

  • Komponentrendering.
  • Kontroll av komponentens utdata och tillstånd.
  • Aktivering av händelsehanterare och livscykelmetoder.
  • Försäkran om att komponentbeteendet är korrekt.

  bUnit är ett exempel på ett bibliotek som möjliggör Razor komponentenhetstestning.

• E2E-testning: En testkörare kör en Blazor app som innehåller CUT och automatiserar en webbläsarinstans. Testverktyget inspekterar och interagerar med CUT via webbläsaren. Playwright för .NET är ett exempel på ett E2E-testramverk som kan användas med Blazor appar.

I enhetstestning ingår endast komponenten Razor (Razor/C#). Externa beroenden, till exempel tjänster och JS interop, måste hånas. I E2E-testning ingår Razor-komponenten och all dess extra infrastruktur i testet, inklusive CSS, JSoch DOM- och webbläsar-API:er.

Testomfång beskriver hur omfattande testerna är. Testomfånget påverkar vanligtvis testernas hastighet. Enhetstester körs på en delmängd av appens undersystem och körs vanligtvis i millisekunder. E2E-tester, som testar en bred grupp av appens undersystem, kan ta flera sekunder att slutföra.

Enhetstestning ger också åtkomst till instansen av CUT, vilket möjliggör inspektion och verifiering av komponentens interna tillstånd. Detta är normalt inte möjligt i E2E-testning.

När det gäller komponentens miljö måste E2E-tester se till att det förväntade miljötillståndet har uppnåtts innan verifieringen påbörjas. Annars är resultatet oförutsägbart. Vid enhetstestning är återgivningen av CUT och testets livscykel mer integrerad, vilket förbättrar teststabiliteten.

E2E-testning innebär att starta flera processer, nätverks- och disk-I/O och annan undersystemaktivitet som ofta leder till dålig testtillförlitlighet. Enhetstester är vanligtvis isolerade från den här typen av problem.

I följande tabell sammanfattas skillnaden mellan de två testmetoderna.

Välj den lämpligaste testmetoden

Tänk på scenariot när du väljer vilken typ av testning som ska utföras. Vissa överväganden beskrivs i följande tabell.

Testa komponenter med bUnit

Det finns inget officiellt Microsoft-testramverk för Blazor, men det communitydrivna projektet bUnit ger ett bekvämt sätt att enhetstesta Razor komponenter.

bUnit fungerar med allmänna testramverk, till exempel MSTest, NUnitoch xUnit. Dessa testramverk gör att bUnit-tester ser ut och känns som vanliga enhetstester. bUnit-tester som är integrerade med ett allmänt testramverk körs vanligtvis med:

• Visual Studio Testutforskaren.
• dotnet test CLI-kommandot i ett kommandogränssnitt.
• En automatiserad DevOps-testpipeline.

Följande visar strukturen för ett bUnit-test på den Counter komponenten i en app baserat på en Blazor projektmall. Komponenten Counter visar och ökar en räknare baserat på att användaren väljer en knapp på sidan:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Följande bUnit-test verifierar att CUT-räknaren ökar korrekt när knappen är markerad:

@code {
    [Fact]
    public void CounterShouldIncrementWhenClicked()
    {
        // Arrange
        using var ctx = new TestContext();
        var cut = ctx.Render(@<Counter />);
        var paraElm = cut.Find("p");

        // Act
        cut.Find("button").Click();

        // Assert
        var paraElmText = paraElm.TextContent;
        paraElm.MarkupMatches("Current count: 1");
    }
}

Tester kan också skrivas i en C#-klassfil:

public class CounterTests
{
    [Fact]
    public void CounterShouldIncrementWhenClicked()
    {
        // Arrange
        using var ctx = new TestContext();
        var cut = ctx.RenderComponent<Counter>();
        var paraElm = cut.Find("p");

        // Act
        cut.Find("button").Click();

        // Assert
        var paraElmText = paraElm.TextContent;
        paraElmText.MarkupMatches("Current count: 1");
    }
}

Följande åtgärder utförs i varje steg i testet:

• Ordna: Komponenten Counter återges med bUnits TestContext. CUT:s styckeelement (<p>) hittas och tilldelas till paraElm. I Razor syntax kan en komponent skickas som en RenderFragment till bUnit.

• Act: Knappens element (<button>) lokaliseras och väljs genom att anropa Click, vilket bör öka räknaren och uppdatera innehållet i stycketaggen (<p>). Textinnehållet för styckeelement hämtas genom att anropa TextContent.

• Assert: MarkupMatches anropas på textinnehållet för att kontrollera att det matchar den förväntade strängen, som är Current count: 1.

Ytterligare resurser

• Komma igång med bUnit: bUnit-instruktioner innehåller vägledning om hur du skapar ett testprojekt, refererar till testramverkspaket och skapar och kör tester.
• Blazor Testning från A till Z - Egil Hansen - NDC London 2025 (NDC London)