Since stubs doesn't work for setup components in 2.7, a workaround solution is mocking the component through the testing framework utilities.

In Vitest for example, I do the following;

import { vi } from 'vitest';
import { type CreateElement, defineComponent } from 'vue';

vi.mock('./Button.vue', () => ({
    default: defineComponent({
        props: {
            text: {
                type: String,
                default: '',
            },
        },
        render (createElement) {
            const { $props, $attrs, $emit } = this;

            return createElement('button', {
                attrs: {
                    'data-testid': 'my-button',
                },
            });
        },
    }),
}));

// When I prefer setup
vi.mock('./Button.vue', () => ({
    default: defineComponent({
        props: {
            text: {
                type: String,
                default: '',
            },
        },
        setup (props, { attrs, emit }) {
            return (createElement: CreateElement) => createElement('button', {
                attrs: {
                    'data-testid': 'my-button',
                },
            });
        },
    }),
}));

Side note, defineComponent is not required to mock a component. It is a complimentary method to get type support.

Support stubs and make sure working with Vue 2.7 #2048

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions