docs: improve testing component example to avoid auto import misunderstanding
michaelmcandrew opened this issue · comments
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: npm@10.2.3
- Builder: -
- User Config: devtools, modules
- Runtime Modules: @nuxt/test-utils/module@3.12.1
- 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
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!
Thanks @manniL - appreciate your feedback - I'll look at a PR for the docs.
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.