Open Neophen opened 2 years ago
I'm facing the same issue here
Can we see the ComplexComponent
please ?
<script setup>
</script>
<template>
<h1>Welcome to Vue.js 3</h1>
<ComplexA />
<ComplexB />
<ComplexC />
</template>
Where the Complex[x] components are auto imported by unplugin vue components
When unplugin-vue-components
is used, it is impossible to us the stubs
feature of Vue Test Utils.
This makes unplugin-vue-components
practically unusable with Vitest.
Here is an example repo created with npm create vite@latest
(vue-ts) + @testing-library/vue
+ vitest
+ unplugin-vue-components
.
(It also fails with Vue Test Utils instead of Testing library)
I'm not certain this is related to the first comment but at least there seems to be anything wrong with stubbing.
Is this a similar issue in Vue 2 components? I'm seeing vuecomponent-stub
entries for all Vuetify related components when shallow mounting.
The PR above only applies to Vue3 - and not test utils for Vue2.
I've resolved my issue, but it may be relevant here.
For a Vue 2.7 project - running Vitest and shallow mounting caused all Vuetify components to be returned as <vuecomponent-stub>
. None of the slots rendered either.
To fix this, I had to disable unplugin-vue-components
in the test environment, and instead import the entire Vuetify lib.
This was pretty easy;
In your vitest.config.ts
export default defineConfig((configEnv) => ({
...,
plugins: [
vue2(),
Components({
resolvers: (configEnv.mode !== 'test') ? [VuetifyResolver()] : [],
...
]
Then in your vitest.setup.ts
make sure you import Vuetify from 'vuetify'
and Vue.use(Vuetify)
.
Is this a similar issue in Vue 2 components? I'm seeing
vuecomponent-stub
entries for all Vuetify related components when shallow mounting.
The thing is when stubbing a component that uses both <script setup>
syntax and unplugin-vue-components
, test utils won't do it correctly, which has been solved by the PR.
I'm not sure if Vuetify uses <script setup>
syntax or not, and the PR only applies to the test utils for Vue3.
Issue
When using single/multiple stubs option with vue test utils it renders the whole inner html of the component, like so:
When using with shallow mount the children component names become
anonymous-stub
:both cases are wrong, is there a way to make this work?
Use Case
When using tailwind you can catch style changes with snapshot tests. which I assume are much faster, than cypress component tests.
And you only want to see the styles of the current component under test, so as not to make tests fail when the child element styles update. to avoid flaky tests.
as a workaround you can import components directly, without using
unplugin-vue-components
and it works, but that obviously defeats the purpose of this plugin.Thank you
This plugin saves a ton of time and boilerplate would be awesome to get this little bit to work :)
I'd give it a show with a PR if you could just point me in the direction