vue.jsjestjsvuejs3vue-test-utils

How to pass a SFC with required props to a slot in vue test utils?


Following the Vue 3 docs Slots - Advanced Usage you can pass a SFC to a slot to render in your tests which we want to do for some integrated accessibility testing. My SFC has required props that need to be set but I cannot see a way to pass those in as well?

import List from '../List.vue';
import ListItem from '../components/ListItem.vue';

const factoryMount = () => mount(List, {
    slots: {
        default: ListItem,
    },
});

Gives me this error as the prop is required in ListItem:

[Vue warn]: Missing required prop: "label"

Is there a way I can load a SFC to a slot along with its required props?

I've tried using setProps but that can only be used with the mounted component. Is there another way?


Solution

  • Thank you Estus Flask. This worked:

    import { h } from 'vue';
    import List from '../List.vue';
    import ListItem from '../components/ListItem.vue';
            
    const factoryMount = () => mount(List, {
        slots: {
            default: h(ListItem, {
                label: 'List item text'
            }),
        },
     });