I have a Blazor component like this:
// MyComponent.razor
<InputFile id="input-file" OnChange="@LoadImage" accept=".jpg,.jpeg,.png"/>
@code {
internal IBrowserFile? File;
private void LoadImage(InputFileChangeEventArgs args) => File = args.File;
}
I want to test the event handler of this component using bUnit with the following test:
[Test]
public void UploadFile()
{
// Arrange
var browserFile = new Mock<IBrowserFile>().Object;
var ctx = new TestContext();
var testee = ctx.RenderComponent<MyComponent>
// Act
testee.Find("[id^=\"input-file\"]").Change(new InputFileChangeEventArgs(new []{browserFile}));
// Assert
testee.Instance.File.Should().Be(browserFile);
}
This test fails with the following error:
Bunit.MissingEventHandlerException : The element does not have an event handler for the event 'onchange', nor any other events.
at Bunit.TriggerEventDispatchExtensions.TriggerNonBubblingEventAsync(ITestRenderer renderer, IElement element, String eventName, EventArgs eventArgs) in /_/src/bunit.web/EventDispatchExtensions/TriggerEventDispatchExtensions.cs:line 144
at Bunit.InputEventDispatchExtensions.ChangeAsync(IElement element, ChangeEventArgs eventArgs) in /_/src/bunit.web/EventDispatchExtensions/InputEventDispatchExtensions.cs:line 36
at Bunit.InputEventDispatchExtensions.Change[T](IElement element, T value) in /_/src/bunit.web/EventDispatchExtensions/InputEventDispatchExtensions.cs:line 18
So how can I trigger Blazor's OnChange
event of an InputFile
?
Thanks!
Is full documented at Testing components that uses the component discussion, invoke
OnChange
on component. In your code:Important part:
To work with
InputFile
you must to setup yourJSInterop
. Use aTestContext
class instead to create your context by hand (avoid this:ctx = new TestContext();
):