Nuxt, VItest and Vueform not working together
Hey Guys π
I am writing you because I really need help. My Team and I are totally stucked when it comes to testing, because we have trouble get Vueform to render inside our Tests.
What am I expecting?
When running the tests with vitest I am using mountSuspended to mount a component that has a Vueform inside. When I make a console log on the mounted components html(), I expect to get the same HTML DOM like in the browser with all the labels and input fields so i can find() and setValue() etc.
What am I getting?
The console log shows me the vue component names instead. Components names like "<vueform><text-element /></vueform>". Therefore I cannot test the form.
I also get some errors that the Components could not be resolved.
I tried so many things the last couple of days that I ran out of ideas. I am sitting here on my weekend because I cannot stop debugging π We need to get this to work. The alternative is to create a different solution for our forms, maybe with vee-validate? But that would be the last solution π©
We are already so deep into our project that it would take a couple of sprints to iron that out.
I prepared an environment on Stackblitz
https://stackblitz.com/edit/github-an8ssj?file=test%2Ftest.spec.ts
Any help is much appreciated!
Tomas Erlebach
StackBlitz
Vueform Nuxt Vitest Setup - StackBlitz
Minimal Testenvironment for Vitest / Vueform Issue
1 Reply
No more help needed here. We removed Vueform and switched to VeeValidate because Vueform was not testable.