[英]Vue how to test component with slot and slot-props
我想测试这个FooComponent
:
<div>
<slot :fn="internalFn" />
</div>
它是这样使用的(例如在ParentComponent
):
<FooComponent>
<template slot-scope="slotProps">
<BarComponent @some-event="slotProps.fn" />
</template>
</FooComponent>
所以我想测试我的组件在从 slot props 调用这个“fn”时的反应。 我看到的最简单的方法是获取方法本身并调用它,如下所示:
cosnt wrapper = shallowMount(FooComponent, /* ... */)
wrapper.vm.methods.internalFn(/* test payload */)
expect(wrapper.emitted()).toBe(/* some expectation */)
但这是众所周知的关于测试内部实现的反模式。 所以相反,我想通过传入 slot 的 prop fn
来测试它,因为它也是某种组件接口,就像组件自己的 props。
但是如何测试在插槽中传递的道具? 我可以想象它只有在我测试ParentComponent
类似的情况下才有效:
const wrapper = shallowMount(ParentComponent, /* ... */)
const foo = wrapper.find(FooComponent)
wrapper.find(BarComponent).vm.$emit('some-event', /*...*/)
/* write expectations against foo */
但这感觉就像在ParentComponent
测试中对FooComponent
进行测试
也许有更好的方法来做到这一点?
我参加聚会有点晚了,但我遇到了同样的问题。 我从实际的 Vue 测试中获得了一些提示,虽然与我们相比,它们在测试的内容上更加抽象,但确实有所帮助。
这是我想出的:
import { shallowMount } from '@vue/test-utils';
import Component from 'xyz/Component';
let wrapperSlotted;
describe('xyz/Component.vue', () => {
beforeAll(() => {
wrapperSlotted = shallowMount(Component, {
data() {
return { myProp: 'small' }
},
scopedSlots: {
default: function (props) {
return this.$createElement('div', [props.myProp]);
}
},
});
});
it('slot prop passed to a scoped slot', () => {
let text = wrapperSlotted.find('div').text();
expect(text).toBe('small'); // the value of `myProp`, which has been set as the text node in the slotted <div />
});
});
所以主要的是我使用了scopedSlots
的渲染函数。
希望对某人有所帮助:)
UPD:线下是我多年前给出的原始答案。 对于今天,我会说这些方法之一就足够了:
不要测试 slot 方法,而是测试依赖它的面向用户的功能。 先尝试手动测试,注意你是怎么做的,然后尝试编写一个类似的测试。 例如使用测试库/vue
如果第一个选项太难做,试着想出一些假的测试组件。 这个想法与我在问题中描述的非常相似
但这感觉就像在 ParentComponent 的测试中对 FooComponent 进行测试
但是不是使用ParentComponent
而是创建一些非常简单的内联组件(就在您的FooComponent.spec.js
文件中),它使用带有插槽的组件。
2020 年给出的原始答案:
由于没有答案,所以我只分享我最终得到的。
我决定测试内部方法。 这并不酷,但至少,因为我使用打字稿,我有一个类型安全测试,如果我重命名或修改我测试的方法,它将失败并显示明确的类型错误。 看起来像这样:
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 */)
经过一些实验,我找到了一种方法来测试在作用域槽中传递的函数。
// MyComponent.vue
<template>
<div>
<slot :data="{ isLoading, response, reload: fetchData }" />
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
isLoading: false,
response: null,
}
},
created() {
this.fetchData()
},
methods: {
async fetchData() {
this.isLoading = true
// Some async action...
this.response = 'Hello Word'
this.isLoading = false
}
}
}
</script>
// MyComponent.spec.js
// I'm cutting some corners here, you should mock your async implementation using Jest (jest.fn() or jest.mock())
// I recommend using `flushPromises` package to flush async requests
//...
it('should fetch data again', async () => {
const wrapper = shallowMount(MyComponent, {
scopedSlots: {
default: `
<test @click="props.data.reload">Click here</test>
`,
},
components: {
test: Vue.component('test', {
template: `<div><slot /></div>`
})
},
})
await wrapper.vm.$nextTick()
// await flushPromises()
/* Pre-assertion */
expect(myMock).toHaveBeenCalledTimes(1)
wrapper.find('test-stub').vm.$emit('click')
await wrapper.vm.$nextTick()
// await flushPromises()
/* Assertion */
expect(myMock).toHaveBeenCalledTimes(2)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.