Vue Test Utils中如何触发右键事件？现有尝试均失败

先看你提供的测试代码：

import { mount } from '@vue/test-utils'
import sinon from 'sinon'
import Foo from './Foo'

const clickHandler = sinon.stub()
const wrapper = mount(Foo, { propsData: { clickHandler } })

// click works
wrapper.trigger('click')

// right click **doesn't** work
wrapper.trigger('click.right')

// contextmenu **doesn't** work either
wrapper.trigger('contextmenu')

expect(clickHandler.called).toBe(true)

你碰到的问题其实挺常见的——Vue Test Utils的trigger方法默认只会触发左键点击，直接用click.right不是合法的事件名，单纯调用contextmenu也没传递右键对应的事件参数，所以才会失效。下面给你两种可行的解决办法：

方法一：触发contextmenu事件时传递右键参数 #

如果你的组件是通过@contextmenu监听右键菜单事件，只需要在触发时指定button属性为2（右键对应的button值）：

// 正确触发右键菜单事件
wrapper.trigger('contextmenu', { button: 2 })

方法二：触发click事件时模拟右键点击 #

如果你的组件是用@click.right这种修饰符监听右键点击，需要在触发click事件时传入button: 2的参数，这样Vue的事件修饰符才能识别这是右键点击：

// 模拟右键点击触发@click.right
wrapper.trigger('click', { button: 2 })

修改后的完整测试代码示例：

import { mount } from '@vue/test-utils'
import sinon from 'sinon'
import Foo from './Foo'

const clickHandler = sinon.stub()
const wrapper = mount(Foo, { propsData: { clickHandler } })

// 触发右键点击（根据组件的监听方式二选一）
wrapper.trigger('contextmenu', { button: 2 })
// 或者 wrapper.trigger('click', { button: 2 })

expect(clickHandler.called).toBe(true)

原理其实很简单：Vue的.right事件修饰符本质上是在事件处理函数中检查event.button === 2，所以测试时必须手动传入这个参数才能让修饰符生效；而contextmenu事件本身也需要正确的button参数才能触发对应的绑定逻辑。

内容的提问来源于stack exchange，提问作者Adi