What is the difference between renderSuspended and mountSuspended ?
what's the difference between renderSuspended and mountSuspended I can't figure it out ?
2 Replies
Hi @Necrelox. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The main difference between
renderSuspended
and mountSuspended
is in the testing library they're based on and how they approach component testing in Nuxt applications.
mountSuspended
is based on Vue Test Utils:
- It wraps the mount
function from @vue/test-utils
- Returns a Vue Test Utils wrapper object that provides methods for interacting with and asserting on the component
- Allows you to test components within the Nuxt environment, with access to Nuxt plugins and async setup
- Provides a more object-oriented approach to testing
renderSuspended
is based on Testing Library:
- It uses @testing-library/vue
under the hood
- Renders the component inside a <div id="test-wrapper"></div>
- Is designed to be used with Testing Library utilities like screen
and fireEvent
- Follows Testing Library's philosophy of testing components in a way that's closer to how users interact with them
- Returns the rendered HTML as a string
Both functions allow you to test components within the Nuxt environment and support async setup, but they're designed to work with different testing approaches and libraries.
Here's an example of using mountSuspended
:
And here's an example of using renderSuspended
:
For more details, you can check the Nuxt testing documentation and the Vue Test Utils documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@295266220444352512> Kapa.ai is still learning and improving, please let me know how I did by reacting below.