Vue-test-utils: Rendering Slot Content for Snapshots

[robokozo]

What problem does this feature solve?

Some components have a large portion of testable code that exists within a wrapping components slot. Shallow Mounting a component prevents slot contents from appearing.

exports[`DashboardAvailableRoomCard should render correctly 1`] = `<empdashboardcard-stub class="available-room-card"></empdashboardcard-stub>`;

When the component template looks like this:

<template>
    <EmpDashboardCard class="available-room-card">
        <div slot="header" class="available-room-card__header">{{ room.name }}</div>
        <div slot="content" class="available-room-card__positions">
            <div class="available-room-card__time">Available until {{ availableUntilTime }}</div>
            <EmpButton small secondary @click="scheduleInterview" class="available-room-card__schedule-itw-btn">
                Schedule Interview
            </EmpButton>
        </div>
    </EmpDashboardCard>
</template>

Please note! I think this functionality already exists in someway within vue-test-utils because if I do NOT register my special components (localVue.use(EmpComponents)) I get the following snapshot... which to me, is ideal.

exports[`DashboardAvailableRoomCard should render correctly 1`] = `
<empdashboardcard class="available-room-card">
  <div slot="header" class="available-room-card__header">ROOM-NAME-HERE</div>
  <div slot="content" class="available-room-card__positions">
    <div class="available-room-card__time">Available until Wednesday @ 16:43</div>
    <empbutton small="" secondary="" class="available-room-card__schedule-itw-btn">
      Schedule Interview
    </empbutton>
  </div>
</empdashboardcard>
`;

The only problem is, the jest test runner will console.error out asking me if I registered the component correctly.

What does the proposed API look like?

No api changes necessary.

[robokozo]

I took the time to write a stub 'helper' that can help accomplish my desired goals but I think it'd be awesome if this was 'built in' by default.

export default function slotStubHelper(name = "stub", slots = []){
    return {
        name,
        render(createElement) {
            return createElement(`${name}-stub`, slots.map(x => this.$slots[x]))
        }
    }
}

const localVue = createLocalVue();
localVue.use(EmpComponents)

const EmpDashboardCard = slotStubHelper("EmpDashboardCard", ["header", "content"])
const EmpButton = slotStubHelper("EmpButton", ["default"])

test("should render correctly", () => {
    const wrapper = shallowMount(DashboardAvailableRoomCard, {
        localVue,
        propsData: {
            room: {
                name: "ROOM-NAME-HERE"
            },
            availableUntil: new Date(2020, 5, 10, 16, 43, 24)
        },
        stubs: {
            EmpDashboardCard, 
            EmpButton
        }
    })

    expect(wrapper.html()).toMatchSnapshot()
})

[VictorCazanave]

@robodude If I understand well your need, you can also define custom stubs with slots:

VueTestUtils.config.stubs = {
  EmpDashboardCard: '<div class="stub-EmpDashboardCard"><slot name="header"/><slot name="content"/></div>',
  EmpButton: '<div class="stub-EmpButton"><slot/></div>'
};

[robokozo]

Hey @VictorCazanave! Thanks for the info... but where does VueTestUtils come from?

[robokozo]

Ah, I see: https://vue-test-utils.vuejs.org/api/config.html

[VictorCazanave]

Yes, I think you can define the stubs globally in the Jest setupTestFrameworkScriptFile using config or in each test file using the stubs mounting option.

[eddyerburgh]

Stubs now render slot children by default, so the initial example behaves as you proposed in beta.27

[robokozo]

I ran into this again on ^1.0.0-beta.28 while trying to test a vuetify app.

[Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[eddyerburgh]

Can you please open a new issue with a reproduction?

[robokozo]

Will do! Thanks, @eddyerburgh
https://github.com/vuejs/vue-test-utils/issues/1116