Blazor 组件单元测试的 Mocking IJSRuntime

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

Answer 1

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);

Answer 2

Microsoft uses a lot of internal Singletons and therefore having test on application Level very very difficult and you should replace all Default Services like IJSRuntime, NavigationManager and NavigationInterceptor. I hope in the next preview there will be an easy way to create a unittest methods and simulate the browser.