Как я могу вызвать событие 'blur' при тестировании компонента vuejs?

Question

Я пишу тест для компонента vue, который должен вызывать метод при потере фокуса.

Согласно vue-test-utils, я должен использовать wrapper.trigger('blur').Но метод не срабатывает.Я подозреваю, что blur не является правильным именем события, так как в консоли оно отображается как focusout.Но изменение имени не решает проблему.

Компонент:

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

Тестовый файл:

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()
    }

Я ожидал, что использование wrapper.trigger('blur') вызовет foo, который издевается над mockFn.Но mockFn никогда не называется.

Answer 1

Я нашел решение. Вход в MyComponent должен инициировать событие. Затем MyComponent получает событие.

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()
    }