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

55 Views Asked by At

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?

1

There are 1 best solutions below

0
gemmalouise On BEST ANSWER

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'
        }),
    },
 });