Image for post
Image for post

This Blazor article shows how to unit test a Blazor component. You can find the Github source repository this article series is based on here.

How to write the component to test?

In this article, I will present a way to test the component we have been writing in this previous article: Write a reusable Blazor component. I consider at this stage that we are now familiar with creating a reusable Blazor component and we will focus on how to unit test it.

Create the test project

In order to test our “Component1”, we need to set up a unit test project. Please note that I suppose that we are in the same solution as the component itself. In this article I will use xUnit as unit testing framework and Moq as mocking library but you can use whatever equivalent librairies you prefer. …


Image for post
Image for post

First part of a Blazor article series to tell how to create a reusable Blazor component that will be used in your Blazor application independently of the hosting model (Web Assembly or Server-side).

You can find the Github source repository this article series in base on here.

Create the component project

To create a reusable component, we need to create a Razor Class Library with visual studio:

Image for post
Image for post

Or razorclasslib with dotnet command line interface:

dotnet new razorclasslib

By default, the created project contains several elements:

A predefined “Component1” that is a basic component displaying some styled text in Component1.razor.

  • A ExampleJsInterop class that demonstrate how to call a basic JS function defined in its own js file in ExampleJsInterop.cs.
  • The static resources (like png, css and js files) in the “wwwroot” folder:
    - background.png
    - exampleJsInterop.js

Xavier Solau

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store