Vue3 Jest测试：触发带参数存根组件事件并获取返回值

一、触发事件时传递参数 #

你之前写的upload.trigger('uploadMethod')是个小错误——模板里绑定的是@upload事件，所以要触发的是upload事件，不是方法名。触发时第二个参数就能传方法需要的参数：

// 比如要传一个文件对象参数
const uploadStub = wrapper.find('component-stub');
uploadStub.trigger('upload', { file: 'test.pdf' });

如果方法要接收多个参数，直接把参数放进数组里传就行：

uploadStub.trigger('upload', ['参数1', '参数2', '文件对象']);

二、获取方法的返回值 #

有两种常用方式，看你需要模拟真实交互还是直接验证方法逻辑：

1. 直接调用组件实例的方法 #

最简单的方式就是直接从wrapper的vm上调用uploadMethod，传参同时拿到返回值：

const result = wrapper.vm.uploadMethod({ file: 'test.pdf' });
// 直接断言返回值是否符合预期
expect(result).toBe('你预期的返回内容');

2. 模拟事件触发并捕获返回值 #

如果想完全模拟用户触发组件事件的流程，可以先给uploadMethod加个“钩子”，跟踪它的返回值：

// 先存下原方法，避免覆盖后丢失逻辑
const originalUploadMethod = wrapper.vm.uploadMethod;
let methodReturnResult;

// 重写方法，调用原方法的同时记录返回值
wrapper.vm.uploadMethod = (...args) => {
  methodReturnResult = originalUploadMethod(...args);
  return methodReturnResult;
};

// 触发存根组件的upload事件
uploadStub.trigger('upload', { file: 'test.pdf' });

// 断言返回值
expect(methodReturnResult).toBe('你预期的返回内容');

三、额外提醒 #

• 要是uploadMethod是异步方法，记得用async/await处理：

const result = await wrapper.vm.uploadMethod({ file: 'test.pdf' });
expect(result).resolves.toBe('异步返回的预期内容');

• 确保find('component-stub')找到的是正确的存根组件，多个同名存根的话可以用findAll加索引筛选。

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