Focus event unit test doesn't works in Vuejs / Jest

Question

I want to create a unit test for two events, on focus and on blur. I am using vueJS and jest.

    handleFocus(event) {
      if (this.blured === true)
        if (event.relatedTarget !== null) {
          this.blured = event.relatedTarget.className
            .toString()
            .includes("datepicker");
        } else this.blured = false;
    }

That's what i tried, but the method seems not to be called

  beforeEach(() => {
    mocks = {
      $t: jest.fn()
    };
  });

 it("calls 'handleFocus' on focus", async () => {
    const wrapper = mount(CxpDatepicker, {
      mocks,
      localVue
    });
    const input = wrapper.find("input");
    wrapper.vm.handleFocus = jest.fn();
    input.trigger("focus");
    await localVue.nextTick();
    expect(wrapper.vm.handleFocus).toHaveBeenCalled();
  });

Please help pe to find the solution.

Answer 1

I understand I am very late to reply, but if you or anyone else still needs to know,
Try following to invoke your event:

input.element.dispatchEvent(new FocusEvent('focus'));

Instead of

input.trigger("focus");

I was also not able to invoke it. So I tried this way, and it worked for me.