Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: improve testing component example to avoid auto import misunderstanding #27120

Closed
michaelmcandrew opened this issue May 9, 2024 · 4 comments · Fixed by #27138
Closed

docs: improve testing component example to avoid auto import misunderstanding #27120

michaelmcandrew opened this issue May 9, 2024 · 4 comments · Fixed by #27138
Assignees
@michaelmcandrew
Labels
3.x documentation good first issue

Comments

@michaelmcandrew
Copy link
Contributor

Environment

  • Operating System: Linux
  • Node Version: v18.18.0
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: [email protected]
  • Builder: -
  • User Config: devtools, modules
  • Runtime Modules: @nuxt/test-utils/[email protected]
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/github-aygvkp?file=components%2Fcomponent.nuxt.test.ts

Open the stackblitz and notice that the editor complains:

Cannot find name 'SomeComponent'. Did you mean 'component'?(2552)
component.nuxt.test.ts(10, 9): 'component' is declared here.

Run the test suite and notice that the tests fail with:

ReferenceError: SomeComponent is not defined

Describe the bug

I have followed the instructions on https://nuxt.com/docs/getting-started/testing and the way I read this section SomeComponent should be auto-imported into that test.

The test suite runs successfully and all tests pass if I uncomment the SomeComponent import on line 4 but according to the example in the doc, that isn't necessary. Also, when I uncomment line 4, I get the following error:

Cannot find module './SomeComponent' or its corresponding type declarations.(2307)

Compare this to a similar import in SomeWrapperComponent.vue which does not cause the error.

Additional context

No response

Logs

No response
@stackblitz StackBlitz
Copy link

stackblitz bot commented May 9, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@manniL
Copy link
Member

manniL commented May 9, 2024

I think the docs are misleading there. You have to explicitly import the component. "Auto imports" of sub components should work fine.

PR welcome to improve it!

@manniL manniL changed the title Component auto import not working with @nuxt/test-utils Improve testing component example to avoid misleading auto import understanding May 9, 2024
@michaelmcandrew
Copy link
Contributor Author

Thanks @manniL - appreciate your feedback - I'll look at a PR for the docs.

@danielroe
Copy link
Member

Thank you! I would suggest doing this:

import { SomeComponent } from '#components'

The auto-import of components that is supported in the runtime environment is within the component (e.g. SomeComponent doesn't have to explicitly import components used in it), not within the test file.

@michaelmcandrew michaelmcandrew mentioned this issue May 9, 2024
Merged
@michaelmcandrew michaelmcandrew changed the title Improve testing component example to avoid misleading auto import understanding docs: improve testing component example to avoid auto import misunderstanding May 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@michaelmcandrew michaelmcandrew

Labels
3.x documentation good first issue
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs: improve testing component examples michaelmcandrew/nuxt
3 participants
@michaelmcandrew @manniL @danielroe