我有一个Vue 3 Composable,它返回一个函数,该函数发出带有有效负载的事件.我想用vitest来进行单元测试,在调用Composable的函数时是否发出事件,以及有效负载是否包含正确的数据.下面是一个可组合的示例:

interface Emits {
  (e: "customEvent", payload: number): void;
}

export function useDemo(emit: Emits) {
  function demoFunction() {
    emit("customEvent", 42);
  }

  return {
    demoFunction,
  };
}

我需要一种方法来测试通过呼叫demoFunction(),事件customEvent是否与数据42一起发出.

推荐答案

由于emit在某种程度上是可预测的,因此可以测试单元的实现,而不是它使用Vue事件产生的行为:

let emit = vi.fn();
let { demoFunction } = useDemo(emit);
demoFunction();
expect(emit).toBeCalledWith("customEvent", 42);

Vue.js相关问答推荐

VueJS CKeditor5 上传图片

Vue.js 开发工具未显示

如何渲染数组以 Select 选项 vue.js

如何在 Laravel 中包含 Bootstrap-Vue

Vue.js 中有没有类似Jquery $(document).ready的功能?

在 vue 组件中检索配置和环境变量

使用 Vue Router 设置页面标题

在 SASS 中使用 Vuetify 类

如何为 Vue 项目设置 lint-staged?

Vue.js 中 Chrome 和 Datalist 的性能问题

如何从 .vue 文件中导出多个对象

包含 Vue 组件的 HTML 字符串的 Nuxt 渲染函数

Vue代理设置不起作用

这是 v-on:change 的正确用法吗?

交换数组项

Vuex 存储数据总是驻留在内存中?

Vue Js如何在单个文件模板中使用mixins?

Laravel 和 Vue - handler.call 不是函数

返回 VueJS 方法的Native Code消息

在 vue.js 应用程序中将静态内容(例如国家代码)存储在哪里?