dotnet-blazor-testing

Name: dotnet-blazor-testing
Author: wshaddix

65stars10forks

How to install dotnet-blazor-testing?

wshaddix/dotnet-skills/dotnet-blazor-testing

$npx -y skills add wshaddix/dotnet-skills --skill dotnet-blazor-testing

Installs into the current project.

Summary

Testing Blazor components. bUnit rendering, events, cascading params, JS interop mocking.

Files · 1

View on GitHub

SKILL.md

1	# dotnet-blazor-testing
2
3	bUnit testing for Blazor components. Covers component rendering and markup assertions, event handling, cascading parameters and cascading values, JavaScript interop mocking, and async component lifecycle testing. bUnit provides an in-memory Blazor renderer that executes components without a browser.
4
5	Version assumptions: .NET 8.0+ baseline, bUnit 1.x (stable). Examples use the latest bUnit APIs. bUnit supports both Blazor Server and Blazor WebAssembly components.
6
7	Out of scope: Browser-based E2E testing of Blazor apps is covered by [skill:dotnet-playwright]. Shared UI testing patterns (page object model, selectors, wait strategies) are in [skill:dotnet-ui-testing-core]. Test project scaffolding is owned by [skill:dotnet-add-testing].
8
9	Prerequisites: A Blazor test project scaffolded via [skill:dotnet-add-testing] with bUnit packages referenced. The component under test must be in a referenced Blazor project.
10
11	Cross-references: [skill:dotnet-ui-testing-core] for shared UI testing patterns (POM, selectors, wait strategies), [skill:dotnet-xunit] for xUnit fixtures and test organization, [skill:dotnet-blazor-patterns] for hosting models and render modes, [skill:dotnet-blazor-components] for component architecture and state management.
12
13	---
14
15	## Package Setup
16
17	```xml
18	<PackageReference Include="bunit" Version="1.*" />
19	<!-- bUnit depends on xunit internally; ensure compatible xUnit version -->
20	```
21
22	bUnit test classes inherit from `TestContext` (or use it via composition):
23
24	```csharp
25	using Bunit;
26	using Xunit;
27
28	// Inheritance approach (less boilerplate)
29	public class CounterTests : TestContext
30	{
31	[Fact]
32	public void Counter_InitialRender_ShowsZero()
33	{
34	var cut = RenderComponent<Counter>();
35
36	cut.Find("[data-testid='count']").MarkupMatches("<span data-testid=\"count\">0</span>");
37	}
38	}
39
40	// Composition approach (more flexibility)
41	public class CounterCompositionTests : IDisposable
42	{
43	private readonly TestContext _ctx = new();
44
45	[Fact]
46	public void Counter_InitialRender_ShowsZero()
47	{
48	var cut = _ctx.RenderComponent<Counter>();
49	Assert.Equal("0", cut.Find("[data-testid='count']").TextContent);
50	}
51
52	public void Dispose() => _ctx.Dispose();
53	}
54	```
55
56	---
57
58	## Component Rendering
59
60	### Basic Rendering and Markup Assertions
61
62	```csharp
63	public class AlertTests : TestContext
64	{
65	[Fact]
66	public void Alert_WithMessage_RendersCorrectMarkup()
67	{
68	var cut = RenderComponent<Alert>(parameters => parameters
69	.Add(p => p.Message, "Order saved successfully")
70	.Add(p => p.Severity, AlertSeverity.Success));
71
72	// Assert on text content
73	Assert.Contains("Order saved successfully", cut.Markup);
74
75	// Assert on specific elements
76	var alert = cut.Find("[data-testid='alert']");
77	Assert.Contains("success", alert.ClassList);
78	}
79
80	[Fact]
81	public void Alert_Dismissed_RendersNothing()
82	{
83	var cut = RenderComponent<Alert>(parameters => parameters
84	.Add(p => p.Message, "Info")
85	.Add(p => p.IsDismissed, true));
86
87	Assert.Empty(cut.Markup.Trim());
88	}
89	}
90	```
91
92	### Rendering with Child Content
93
94	```csharp
95	[Fact]
96	public void Card_WithChildContent_RendersChildren()
97	{
98	var cut = RenderComponent<Card>(parameters => parameters
99	.AddChildContent("<p>Card body content</p>"));
100
101	cut.Find("p").MarkupMatches("<p>Card body content</p>");
102	}
103
104	[Fact]
105	public void Card_WithRenderFragment_RendersTemplate()
106	{
107	var cut = RenderComponent<Card>(parameters => parameters
108	.Add(p => p.Header, builder =>
109	{
110	builder.OpenElement(0, "h2");
111	builder.AddContent(1, "Card Title");
112	builder.CloseElement();
113	})
114	.AddChildContent("<p>Body</p>"));
115
116	cut.Find("h2").MarkupMatches("<h2>Card Title</h2>");
117	}
118	```
119
120	### Rendering with Dependency Injection
121
122	Register services before rendering components that depend on them:
123
124	```csharp
125	public class OrderListTests : TestContext
126	{
127	[Fact]
128	public async Task OrderList_OnLoad_DisplaysOrders()
129	{
130	// Register mock service
131	var mockService = Substitute.For<IOrderService>();
132	mockService.GetOrdersAsync().Returns(
133	[
134	new OrderDto { Id = 1, CustomerName = "Alice", Total = 99.99m },
135	new OrderDto { Id = 2, CustomerName = "Bob", Total = 149.50m }
136	]);
137	Services.AddSingleton(mockService);
138
139	// Render component -- DI resolves IOrderService automatically
140	var cut = RenderComponent<OrderList>();
141
142	// Wait for async data loading
143	cut.WaitForState(() => cut.FindAll("[data-testid='order-row']").Count == 2);
144
145	var rows = cut.FindAll("[data-testid='order-row']");
146	Assert.Equal(2, rows.Count);
147	Assert.Contains("Alice", rows[0].Text

wshaddixPublisher · 77 listings

Preview

wshaddix/dotnet-skills

# dotnet-blazor-testing

bUnit testing for Blazor components. Covers component rendering and markup assertions, event handling, cascading parameters and cascading values, JavaScript int

**Version assumptions:** .NET 8.0+ baseline, bUnit 1.x (stable). Examples use the latest bUnit APIs. bUnit supports both Blazor Server and Blazor WebAssembly co

**Out of scope:** Browser-based E2E testing of Blazor apps is covered by [skill:dotnet-playwright]. Shared UI testing patterns (page object model, selectors, wa

Repowshaddix/dotnet-skills

License—

TypeSkills

CategoryTesting

UpdatedFeb 2026

Repo stars65

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type

dotnet-blazor-testing

65stars10forks

View on GitHub

How to install dotnet-blazor-testing?

wshaddix/dotnet-skills/dotnet-blazor-testing

$npx -y skills add wshaddix/dotnet-skills --skill dotnet-blazor-testing

Installs into the current project.

Summary

Testing Blazor components. bUnit rendering, events, cascading params, JS interop mocking.

Files · 1

View on GitHub

SKILL.md

1	# dotnet-blazor-testing
2
3	bUnit testing for Blazor components. Covers component rendering and markup assertions, event handling, cascading parameters and cascading values, JavaScript interop mocking, and async component lifecycle testing. bUnit provides an in-memory Blazor renderer that executes components without a browser.
4
5	Version assumptions: .NET 8.0+ baseline, bUnit 1.x (stable). Examples use the latest bUnit APIs. bUnit supports both Blazor Server and Blazor WebAssembly components.
6
7	Out of scope: Browser-based E2E testing of Blazor apps is covered by [skill:dotnet-playwright]. Shared UI testing patterns (page object model, selectors, wait strategies) are in [skill:dotnet-ui-testing-core]. Test project scaffolding is owned by [skill:dotnet-add-testing].
8
9	Prerequisites: A Blazor test project scaffolded via [skill:dotnet-add-testing] with bUnit packages referenced. The component under test must be in a referenced Blazor project.
10
11	Cross-references: [skill:dotnet-ui-testing-core] for shared UI testing patterns (POM, selectors, wait strategies), [skill:dotnet-xunit] for xUnit fixtures and test organization, [skill:dotnet-blazor-patterns] for hosting models and render modes, [skill:dotnet-blazor-components] for component architecture and state management.
12
13	---
14
15	## Package Setup
16
17	```xml
18	<PackageReference Include="bunit" Version="1.*" />
19	<!-- bUnit depends on xunit internally; ensure compatible xUnit version -->
20	```
21
22	bUnit test classes inherit from `TestContext` (or use it via composition):
23
24	```csharp
25	using Bunit;
26	using Xunit;
27
28	// Inheritance approach (less boilerplate)
29	public class CounterTests : TestContext
30	{
31	[Fact]
32	public void Counter_InitialRender_ShowsZero()
33	{
34	var cut = RenderComponent<Counter>();
35
36	cut.Find("[data-testid='count']").MarkupMatches("<span data-testid=\"count\">0</span>");
37	}
38	}
39
40	// Composition approach (more flexibility)
41	public class CounterCompositionTests : IDisposable
42	{
43	private readonly TestContext _ctx = new();
44
45	[Fact]
46	public void Counter_InitialRender_ShowsZero()
47	{
48	var cut = _ctx.RenderComponent<Counter>();
49	Assert.Equal("0", cut.Find("[data-testid='count']").TextContent);
50	}
51
52	public void Dispose() => _ctx.Dispose();
53	}
54	```
55
56	---
57
58	## Component Rendering
59
60	### Basic Rendering and Markup Assertions
61
62	```csharp
63	public class AlertTests : TestContext
64	{
65	[Fact]
66	public void Alert_WithMessage_RendersCorrectMarkup()
67	{
68	var cut = RenderComponent<Alert>(parameters => parameters
69	.Add(p => p.Message, "Order saved successfully")
70	.Add(p => p.Severity, AlertSeverity.Success));
71
72	// Assert on text content
73	Assert.Contains("Order saved successfully", cut.Markup);
74
75	// Assert on specific elements
76	var alert = cut.Find("[data-testid='alert']");
77	Assert.Contains("success", alert.ClassList);
78	}
79
80	[Fact]
81	public void Alert_Dismissed_RendersNothing()
82	{
83	var cut = RenderComponent<Alert>(parameters => parameters
84	.Add(p => p.Message, "Info")
85	.Add(p => p.IsDismissed, true));
86
87	Assert.Empty(cut.Markup.Trim());
88	}
89	}
90	```
91
92	### Rendering with Child Content
93
94	```csharp
95	[Fact]
96	public void Card_WithChildContent_RendersChildren()
97	{
98	var cut = RenderComponent<Card>(parameters => parameters
99	.AddChildContent("<p>Card body content</p>"));
100
101	cut.Find("p").MarkupMatches("<p>Card body content</p>");
102	}
103
104	[Fact]
105	public void Card_WithRenderFragment_RendersTemplate()
106	{
107	var cut = RenderComponent<Card>(parameters => parameters
108	.Add(p => p.Header, builder =>
109	{
110	builder.OpenElement(0, "h2");
111	builder.AddContent(1, "Card Title");
112	builder.CloseElement();
113	})
114	.AddChildContent("<p>Body</p>"));
115
116	cut.Find("h2").MarkupMatches("<h2>Card Title</h2>");
117	}
118	```
119
120	### Rendering with Dependency Injection
121
122	Register services before rendering components that depend on them:
123
124	```csharp
125	public class OrderListTests : TestContext
126	{
127	[Fact]
128	public async Task OrderList_OnLoad_DisplaysOrders()
129	{
130	// Register mock service
131	var mockService = Substitute.For<IOrderService>();
132	mockService.GetOrdersAsync().Returns(
133	[
134	new OrderDto { Id = 1, CustomerName = "Alice", Total = 99.99m },
135	new OrderDto { Id = 2, CustomerName = "Bob", Total = 149.50m }
136	]);
137	Services.AddSingleton(mockService);
138
139	// Render component -- DI resolves IOrderService automatically
140	var cut = RenderComponent<OrderList>();
141
142	// Wait for async data loading
143	cut.WaitForState(() => cut.FindAll("[data-testid='order-row']").Count == 2);
144
145	var rows = cut.FindAll("[data-testid='order-row']");
146	Assert.Equal(2, rows.Count);
147	Assert.Contains("Alice", rows[0].Text

wshaddixPublisher · 77 listings

Preview

wshaddix/dotnet-skills

# dotnet-blazor-testing

bUnit testing for Blazor components. Covers component rendering and markup assertions, event handling, cascading parameters and cascading values, JavaScript int

**Version assumptions:** .NET 8.0+ baseline, bUnit 1.x (stable). Examples use the latest bUnit APIs. bUnit supports both Blazor Server and Blazor WebAssembly co

**Out of scope:** Browser-based E2E testing of Blazor apps is covered by [skill:dotnet-playwright]. Shared UI testing patterns (page object model, selectors, wa

Repowshaddix/dotnet-skills

License—

TypeSkills

CategoryTesting

UpdatedFeb 2026

Repo stars65

First seenJul 22, 2026

People who liked this also viewed

6 picks

Type