Vue.js Vue 如何使用 slot 和 slotprops 测试组件

发布于06月13日

我想测试这个FooComponent:

<div>
  <slot :fn="internalFn" />
</div>

它是这样使用的(例如在ParentComponent中):

<FooComponent>
  <template slot-scope="slotProps">
    <BarComponent @some-event="slotProps.fn" />
  </template>
</FooComponent>

所以我想测试我的组件在从插槽props 调用这个"fn"时的react .我看到的最简单的方法是采用方法本身并调用它，如下所示:

cosnt wrapper = shallowMount(FooComponent, /* ... */)
wrapper.vm.methods.internalFn(/* test payload */)
expect(wrapper.emitted()).toBe(/* some expectation */)

但这被称为测试内部实现的反模式.所以我想通过传送到插槽中的prop fn来测试它，因为它也是某种组件接口，比如组件自己的prop.

但如何测试props 通过槽？我可以想象，只有在我测试ParentComponent个类似的东西时，它才会起作用:

const wrapper = shallowMount(ParentComponent, /* ... */)
const foo = wrapper.find(FooComponent)
wrapper.find(BarComponent).vm.$emit('some-event', /*...*/)
/* write expectations against foo */

但这感觉就像是FooComponent次测试，ParentComponent次内部测试

也许有更好的方法？

import Foo from '@/components/foo/Foo.ts' import FooComponent from '@/components/foo/Foo.vue' /*...*/ cosnt wrapper = <Foo>shallowMount(FooComponent, /* ... */) // notice that because I passed `Foo` which is a class-component, // I have autocomplete and type checks for vm.* wrapper.vm.internalFn(/* test payload */) expect(wrapper.emitted()).toBe(/* some expectation */)

Vue.js Vue 如何使用 slot 和 slotprops 测试组件

推荐答案

Vue.js相关问答推荐

在VueJS中卸载元素之前是否应该删除JavaScript事件收件箱？

Vue Router中.getRoutes()获取的路由顺序优化建议

如何在FormKit中验证文本输入框中不能输入数字

Nuxt 和 Vite 有什么区别？

VueJS CKeditor5 上传图片

将props传递给设置时的VueJS 3组合API和TypeScript类型问题：类型上不存在属性 user用户

使用 vue-cli 遇到无法推断解析器错误

如何在 vue.js 中删除类

使用 Vue Router 设置页面标题

在 SPA VueJS 中全局声明 mapState 和 mapMutations

如何将 Nuxt.js 更新到最新版本

vue-test-utils：无法覆盖属性 $route，这通常是由于插件将该属性添加为只读值

我在 Nuxt 2.14.0 中运行的是什么版本的 Vue？

使用 vue-router 的默认子路由

基于媒体查询的vue绑定值

Vue 组件中的组件渲染函数中可能存在无限更新循环警告

模块构建失败：错误：没有给出解析器和文件路径，无法在 nuxtjs 中推断出解析器

如何在 JEST 测试中模拟全局 Vue.js 变量

如何在 Vue.js 插槽范围内传递方法

Vue js在列表中添加动态字段，删除和排序不起作用