Mocking IJSRuntime for Blazor Component unit tests

Question

Following this prototype for unit testing I've ran into a problem when using JS interop.

[Test]
public void ExampleTest()
{
    var component = host.AddComponent<MyComponent>();
}

Just adding a component that uses IJSRuntime will cause the following exception

System.InvalidOperationException : Cannot provide a value for property 'JsRuntime' on type 'Application.Components.MyComponent'. There is no registered service of type 'Microsoft.JSInterop.IJSRuntime'.

The JS interop isn't doing anything of interest, it's just a void function that focuses an element - I don't care about testing it, I just want to be able to proceed with writing tests for the component itself.

How can I use Moq to mock IJSRuntime?

When I try something like

[Test]
public void ExampleTest()
{
    var jsRuntimeMock = new Mock<IJSRuntime>();

    host.AddService(jsRuntimeMock);

    var component = host.AddComponent<MyComponent>();
}

I still get the exception

Tewr Tewr · Accepted Answer · 2019-10-28T12:06:18

host.AddService(jsRuntimeMock);

registers Mock<IJSRuntime> as a dependency.

No classes in the implementation (outside of a test assembly) should have such a dependency but it's a common error to make.

Register IJSRuntime as a dependency using the Mock<T> property Object, which contains a reference to an object that implements the interface.

Like this:

host.AddService(jsRuntimeMock.Object);

Mocking IJSRuntime for Blazor Component unit tests

2 Answers