unit-testing - Vue 如何使用 slot 和 slot-props 测试组件

Question

我想测试这个FooComponent:

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

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

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

因此，我想测试我的组件对从 slot Prop 调用此“fn”时的 react 。我看到的最简单的方法是获取方法本身并调用它，就像这样:

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

但这是众所周知的关于测试内部实现的反模式。所以我想通过传递到插槽中的 Prop fn 来测试它，因为它也是某种组件接口(interface)，比如组件自己的 Prop 。

但是如何测试插槽中传递的 Prop ？我可以想象它只有在我测试 ParentComponent 类似的东西时才会起作用:

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

但这感觉就像在 ParentComponent 测试中测试 FooComponent

也许有更好的方法？

Answer 1

我参加聚会有点晚了，但我遇到了同样的问题。我从实际的 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 使用了渲染函数。

希望对某人有所帮助:)