Support stubs and make sure working with Vue 2.7

[lmiller1990]

Now Vue 2.7 has script setup, we need some test cases around this. I think stubs doesn't work: cypress-io/cypress#25450

[johndegey]

Hello,

I have a simple base project with vite - vue2.7 - vitest - testing-library
I use unplugin-vue-component (essentially in another project with vuetify 2)
It uses composition api, all imports have been removed from script setup.
Vite as a config for test (remove the use of unplugin-vue-component).

I manage to get it work only if I stub all child component in the test file.
If you don't, vue warn about all the unknown child components.
If you add the import in the script setup, stubbing does not work.

https://github.com/johndegey/vite-vitest-vue2

The branch 'stubbing' does not have unplugin-vue-component
The branch 'stubbing_work' have it.

Hope this could help you...

Best

John

Edit: part of my workaround came from here
unplugin/unplugin-vue-components#429 (comment)

[lmiller1990]

Hi!

What should I do? I checked out stubbing and ran the tests but they all work - no warning/error. What am I missing?

[johndegey]

Hi,

Sorry, i'm terrible at explaining myself ;)

Try the main branch

1. edit TheWelcome.spec.js, add stub for WelcomeItem, run test and stubbing does not work.
2. edit TheWelcome.vue, comment the import for WelcomeItem, run the test, stubbing works

In the branch stubbing_work :

1. you have to use stubbing for all child component, without that, it won't work without warning,
   => there is no import in .vue sfc component
2. if you add the import in TheWelcome.vue, stubbing does not work anymore

Seems that the import in the script setup automaticaly failes the stubbing.

Best
John

[seahindeniz]

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.