feat(test-utils): allow mounting single component for testing

[antfu]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR enables a special route /__nuxt_component_test__/ to mount a single component from everywhere while preserving the Nuxt's pipeline and context. Also added $fetchComponent and componentTestUrl util to @nuxt/test-utils to construct the URL easier.

import { createPage, $fetch, $fetchComponent, componentTestUrl } from '@nuxt/test-utils'

describe('component testing', () => {
  it('should work', async () => {
    const comp1 = await $fetchComponent('components/SugarCounter.vue', { count: 42 })
    expect(comp1).toContain('42 x 2 = 84')

    const comp2 = await $fetchComponent('components/SugarCounter.vue', { count: 100 })
    expect(comp2).toContain('100 x 2 = 200')

    const page = await createPage(componentTestUrl('components/SugarCounter.vue', { count: 42 })
    // ....
  })
})

Caveat

Since it uses dynamic imports from strings, it will only work on dev mode with Vite + viteNode: true

📝 Checklist

• Basic functionality
• Mount with user app.vue (with an option?)
• Add tests with the browser interactions
• Throw error on non Vite Node env
• Throw error when the component does not exist
• Test with Vue Router (should we support it by mocking the router, or we say it would be an anti-pattern to directly use router in components?)
• Interactive playground (adjust props with UI etc) like Storybook? Could be part of DevTools

[netlify]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	47b5baa
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/632be8ee3133d400096aa6c7

[antfu]

💡 Ideas from @danielroe

• we import and initialize app.vue to have the side-effects and context but not render it
• or we use a test-only transform to inject the slot.

[pi0]

Introducing the side-effects of app.vue is probably not the best idea. It makes implementation more fragile and less consistant with selective-ssr components.

[antfu]

If we are on hold for App.vue side-effects, I think the first MVP is ready for review/discussion and then we can iterate in future PRs.

[pi0]

I'm waiting for a review on this PR for #5689 standardizing universal isolated component rendering API.

App.vue side-effects, I think the first MVP is ready for review/discussion and then we can iterate in future PRs.

Sure. I think generally it is a bad decision but if we want to try can be done in another future PR.

[danielroe]

Updated to latest main - wdyt @antfu?

[antfu]

LGTM, thanks!

[antfu]

With nuxt-vitest, this is probably no longer needed?

[tobiasdiez]

Providing a way to render a single component using the nuxt pipeline is also helpful in other scenarios like storybook or cypress integration, see eg nuxt/nuxt#18596 and cypress-io/cypress#23619.

[danielroe]

I've moved this to a subpath - @nuxt/test-utils/experimental that will either allow us to iterate more quickly on the remaining TODO items, or possibly take an alternative path (if @antfu prefers) akin to the work on https://github.com/danielroe/nuxt-vitest.

Thank you so much for your work on this.