How can I trigger the 'blur' event while testing a vuejs component?

Question

I'm writing test on a vue component that must call a method when focus is lost.

According to vue-test-utils I should use wrapper.trigger('blur'). But the method is not fired. I suspect that blur isn't the proper event name, since it appears as focusout in the console. But changing the name doesn't solve the problem.

Component:

<template>
    <input @blur="foo" />
</template>
...

Test file:

import { mount } from 'vue-test-utils'
import MyComponent from '../MyComponent'

describe('myComponent', () => {
    const mockFn = jest.fn()
    const wrapper = mount(MyComponent, { mocks: { foo: mockFn } })
    it('fires "foo" on blur', () => {
        wrapper.trigger('blur')
        expect(mockFn).toHaveBeenCalled()
    }

I expected that using wrapper.trigger('blur') would fire foo, which is mocked with mockFn. But mockFn is never called.

Florian Pittet Comte Harbour · Accepted Answer · 2019-05-21 11:28:39Z

6

I found a solution. The input within MyComponent must trigger the event. Then MyComponent receives the event.

import { mount } from 'vue-test-utils'
import MyComponent from '../MyComponent'

describe('myComponent', () => {
    const mockFn = jest.fn()
    const wrapper = mount(MyComponent, { mocks: { foo: mockFn } })
    it('fires "foo" on blur', () => {
        const childInput = wrapper.find('input')
        childInput.trigger('blur')
        expect(mockFn).toHaveBeenCalled()
    }

answered May 21, 2019 at 11:28

Florian Pittet Comte Harbour

1911 gold badge1 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Narkanister · Accepted Answer · 2020-05-25 14:49:40Z

0

Yes - the component needs to trigger the blur event for you to be able to test it:

<input
  ref="input"
  v-model="text"
  type="text"
  @keyup.enter="toggleEdit($event)"
  @blur="toggleEdit($event)"
/>

answered May 25, 2020 at 14:49

Narkanister

9141 gold badge7 silver badges17 bronze badges

Collectives™ on Stack Overflow

How can I trigger the 'blur' event while testing a vuejs component?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related