diff --git a/aspnetcore/blazor/test.md b/aspnetcore/blazor/test.md
index 0713fa875b..889483bf31 100644
--- a/aspnetcore/blazor/test.md
+++ b/aspnetcore/blazor/test.md
@@ -107,34 +107,59 @@ The following demonstrates the structure of a bUnit test on the `Counter` compon
The following bUnit test verifies that the CUT's counter is incremented correctly when the button is selected:
+```razor
+@code {
+ [Fact]
+ public void CounterShouldIncrementWhenClicked()
+ {
+ // Arrange
+ using var ctx = new TestContext();
+ var cut = ctx.Render(@);
+ var paraElm = cut.Find("p");
+
+ // Act
+ cut.Find("button").Click();
+
+ // Assert
+ var paraElmText = paraElm.TextContent;
+ paraElm.MarkupMatches("Current count: 1");
+ }
+}
+```
+
+Tests can also be written in a C# class file:
+
```csharp
-[Fact]
-public void CounterShouldIncrementWhenSelected()
+public class CounterTests
{
- // Arrange
- using var ctx = new TestContext();
- var cut = ctx.RenderComponent();
- var paraElm = cut.Find("p");
+ [Fact]
+ public void CounterShouldIncrementWhenClicked()
+ {
+ // Arrange
+ using var ctx = new TestContext();
+ var cut = ctx.RenderComponent();
+ var paraElm = cut.Find("p");
- // Act
- cut.Find("button").Click();
- var paraElmText = paraElm.TextContent;
+ // Act
+ cut.Find("button").Click();
- // Assert
- paraElmText.MarkupMatches("Current count: 1");
+ // Assert
+ var paraElmText = paraElm.TextContent;
+ paraElmText.MarkupMatches("Current count: 1");
+ }
}
```
The following actions take place at each step of the test:
-* *Arrange*: The `Counter` component is rendered using bUnit's `TestContext`. The CUT's paragraph element (`
`) is found and assigned to `paraElm`.
+* *Arrange*: The `Counter` component is rendered using bUnit's `TestContext`. The CUT's paragraph element (`
`) is found and assigned to `paraElm`. In Razor syntax, a component can be passed as a to bUnit.
-* *Act*: The button's element (`