This article provides information for bUnit and how it can be used with the Telerik UI for Blazor components.
- What is bUnit
- E2E vs. Unit Testing
- bUnit Limitations
- Testing the Telerik UI for Blazor Components
- Common Issues
bUnit is a popular unit testing framework for Blazor.
Check the following resources for a general introduction to bUnit:
The main difference between e2e tests and unit tests is that end-to-end testing focuses on the application's behavioral flow (clicking a button that populates a message) while unit testing targets functional fragments.
End-to-end tests allow you to test the application from the user's point of view. One tool you can use for end-to-end testing in Blazor is the Selenium framework.
Unit testing focuses on functional verification. You can use unit tests to ensure that the functions or calculations that generate data, a numerical value, or a text string, are working as expected.
A case that requires an interaction with the component is a task for e2e testing.
IJSRuntime. You can find some more details in the bUnit documentation.
The Telerik UI for Blazor components rely on JSInterop to support their rich UX features. This can make testing with bUnit difficult or even impossible in some scenarios due to the above-listed limitation.
You don't have to test our components, as we do that ourselves. Any unit tests for custom markup and logic have to test just that—the custom logic in an isolated scenario.
Consider e2e testing for any case that targets a complete workflow.
Considering the above-listed JS limitation, you may experience some issues when testing the components. The following sections in this article list these issues.
|Issue||When testing a DatePicker the test fails with:
|Cause||A possible cause for this error is that in the test the component is rendered in isolation, without a layout, so the
|Workaround||Ether mock the
data-id is different in the markup
|Issue||Trying to detect an element by
|Workaround||This attribute is used for internal purposes only and should not be included in the check. You may implement a method that can strip the unique attributes from the component, or verify particular elements using their CSS selectors (for instance
|Issue||Testing a component that contains a Scheduler fails with the following error:
|Workaround||Mock the component or refactor the component structure of your app, so that you can test a component that doesn't contain our Scheduler.|
|Issue||Detecting the content of a Dialog fails.|
|Cause||The Dialog, Window and popup elements are rendered on root level and not in their place of declaration.|
|Workaround||To detect the popup content, target the
In future, UI for Blazor will support creation of an interface to easily mock the DialogFactory. Follow the request to gets status updates.
OnRead Not Fired
|Issue||In test environment,
|Workaround||Disable the built-in loader.|
The following samples demonstrate unit testing a Blazor app with Telerik UI for Blazor components, including with bUnit:
You can also visit the Unit Testing Blazor Components with bUnit and JustMock blog post.