Nuxt•4w ago

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:

// tests/components/SomeComponents.nuxt.spec.ts
import { mountSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'

it('can mount some component', async () => {
    const component = await mountSuspended(SomeComponent)
    expect(component.text()).toMatchInlineSnapshot(
        '"This is an auto-imported component"'
    )
})

// tests/components/SomeComponents.nuxt.spec.ts
import { mountSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'

it('can mount some component', async () => {
    const component = await mountSuspended(SomeComponent)
    expect(component.text()).toMatchInlineSnapshot(
        '"This is an auto-imported component"'
    )
})

And here's an example of using renderSuspended:

// tests/components/SomeComponents.nuxt.spec.ts
import { renderSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'
import { screen } from '@testing-library/vue'
it('can render some component', async () => {
  await renderSuspended(SomeComponent)
  expect(screen.getByText('This is an auto-imported component')).toBeDefined()
})

// tests/components/SomeComponents.nuxt.spec.ts
import { renderSuspended } from '@nuxt/test-utils/runtime'
import { SomeComponent } from '#components'
import { screen } from '@testing-library/vue'
it('can render some component', async () => {
  await renderSuspended(SomeComponent)
  expect(screen.getByText('This is an auto-imported component')).toBeDefined()
})

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: ----------------------

kapa.ai•4w ago

<@295266220444352512> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

What is the difference between renderSuspended and mountSuspended ?

Did you find this page helpful?