Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

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

Merged
merged 11 commits into from
Apr 6, 2023

Conversation

antfu
Copy link
Member

@antfu antfu commented Jul 5, 2022

πŸ”— 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
Copy link

netlify bot commented Jul 5, 2022

βœ… Deploy Preview for nuxt3-docs canceled.

Name Link
πŸ”¨ Latest commit 47b5baa
πŸ” Latest deploy log https://app.netlify.com/sites/nuxt3-docs/deploys/632be8ee3133d400096aa6c7

@antfu antfu marked this pull request as draft July 5, 2022 06:06
@antfu antfu marked this pull request as ready for review July 7, 2022 09:55
@antfu antfu marked this pull request as draft July 7, 2022 09:55
@antfu
Copy link
Member Author

antfu commented Jul 8, 2022

πŸ’‘ 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
Copy link
Member

pi0 commented Jul 8, 2022

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.

@danielroe danielroe added enhancement New feature or request test-utils labels Jul 11, 2022
@antfu antfu marked this pull request as ready for review July 15, 2022 08:51
@antfu
Copy link
Member Author

antfu commented Jul 15, 2022

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
Copy link
Member

pi0 commented Jul 15, 2022

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 danielroe added the 3.x label Jan 19, 2023
Copy link
Member

@danielroe danielroe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated to latest main - wdyt @antfu?

@antfu
Copy link
Member Author

antfu commented Feb 4, 2023

LGTM, thanks!

@danielroe danielroe requested a review from pi0 February 7, 2023 16:34
@antfu
Copy link
Member Author

antfu commented Feb 23, 2023

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

@tobiasdiez
Copy link
Contributor

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.

Copy link
Member

@danielroe danielroe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
3.x enhancement New feature or request test-utils
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants