[QUESTION] How to write tests for components that use @nuxt/icon

[gaisinskii]

Hello everyone!

I've stumbled upon an error while writing tests for my components that use nuxt/icon, specifically:

[Vue warn]: Component <NuxtIcon>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered. 

I've found in the docs of the testutils that you have to somehow wrap either NuxtIcon or MyComponent with <Suspense/> and it is also unclear how to import NuxtIcon into the test file since we use <Icon/> in the markup. Can you please show me how to write tests when using nuxt/icon ?

I've created a reproduction setup, after installing all deps it will auto start the test and you will see the error.

https://stackblitz.com/edit/nuxt-vitest-iocqwn

Best regards

[gaisinskii]

Anyone? Am I the only one bothered by this warning ?

[awacode21]

i am also in trouble. The Icon component does not get rendered in my cypress component test. Did you found any way to get your problem solved?

[gaisinskii]

awacode21

I just ditched the library :/

[antfu]

I will work on it and provide a template / guide to it later

[antfu]

I did it in 5724416, it seems that directly following https://nuxt.com/docs/getting-started/testing would work, no specific steps required.