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

Answer 2

是-组件需要触发模糊事件才能进行测试：

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

测试vuejs组件时如何触发'blur'事件？

2 个答案: