How to Write Blazor Unit Tests With bUnit and xUnit

You've been building Blazor applications and the voice in the back of your head is reminding you that you need to write tests. But how? What tools do we have access to in order to unit test Blazor components? Let's dive into bUnit and xUnit!

Have you subscribed to my weekly newsletter yet? A 5-minute read every weekend, right to your inbox, so you can start your weekend learning off strong:

Check out more Dev Leader content (including full in-depth articles with source code examples) here:

Social Media:

Affiliations & Products/Services That I Love:

#dotnet #dotnetcore #aspnetcore #blazor #bunit #xunit

[DevLeader]

Thanks for your support! Check out my FREE weekly newsletter:

[uu]

A good introduction to testing rendered elements. Thank you!

Can declarations like the @page route be tested?
I guess the same goes for @inject services.

[niteshsetin]

One more question: where should the bunit project reside. Does it have any security implications. Can we use it for our internal application in the company.

[blacknwhite]

Thanks, this will be useful getting started. However I would recommend not setting internal values (with the exception of parameters that are required) and instead manipulating the gui. This more accurately tests how the user will interact with the page. Setting the counter to 5, is not testing the funtion that increments the counter, or the gui button to see that it calls that function correctly. So it has very limited value.

[niteshsetin]

Question : why do we need unit testing for blazor frontend only, I understand that backend apis project we can do unit test. But i couldn't understand why we need to write code for ui testing, isnt ui testing has to be manually done.what are we testing when we write those test cases for UI specifically and again if i have complex ui like table where i am testing functionality like export data to csv file or edit the inline cell of tables, isn't it a complex task?