Bug: is config.global.components ignored by testing-lib?
jonsalvas opened this issue · 7 comments
Describe the bug A clear and concise description of what the bug is.
According to the vue-test-utils documentation it is possible to register global stuff using config.global.*
, so for instance with config.global.components = { HelloWorldComponent } you can make that component globally available. This works fine when using mount() from test-utils but fails when using render() from vue-testing-library (that is why I posted the bug here). Error message is such as:
[Vue warn]: Failed to resolve component: HelloWorldComponent
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <ParentComponent ref="VTU_COMPONENT" >
at <VTUROOT>
When adding the component directly to the global in the render() function it works, but not when setting it globally via config.global.
If this is intended that testing-library can only add the globals to the render function, it would mean I have to add the same global for every test (we have 300 tests right now). Then consider this as a feature request :-)
To Reproduce Steps to reproduce the behavior:
Here is a small reproduction project:
https://github.com/jonsalvas/testinglib-reproduce-config-global-issue
Expected behavior
All stuff registered using config.global is globally available in all components.
Screenshots
Related information:
@testing-library/vue
version: 6.5.1Vue
version: 3.2.25node
version: 17.8.0npm
(oryarn
) version: 8.5.5
Relevant code or config (if any)
see reproduction project
Additional context
Initially I encountered the issue when upgrading @vue/test-utils from 2.0.0-rc.17 to 2.0.0-rc.21 so I was sure it was related to that. However when downgrading I was unable to make it work again. I assume my project was broken somehow.
Thanks for posting! I'm having the same issue - would love to see a fix to this. It seems that @testing-library/vue
just ignores the following setupFile
for Vitest:
import { config } from '@vue/test-utils';
import { Quasar } from 'quasar';
import { afterAll, beforeAll } from 'vitest';
const globalConfigBackup = config.global;
beforeAll(() => {
config.global.plugins.unshift([Quasar, {}]);
});
afterAll(() => {
config.global = globalConfigBackup;
});
Same setup works fine when using mount
and @vue/test-utils
.
It looks like the problem is that when working with vitest
, the project files and @testing-library/vue
are importing different builds of @vue/test-utils
:
node_modules/@vue/test-utils/dist/vue-test-utils.esm-bundler.mjs
ESM imported in project filesnode_modules/@vue/test-utils/dist/vue-test-utils.cjs.js
CJS imported by@testing-library/vue
As a workaround I've created an alias in vite.config.ts
that forces the CJS import:
// vite.config.ts
{
...
resolve: {
alias: [
{
find: '@vue/test-utils',
replacement: '/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js',
},
]
}
}
There're probably better ways to to do this but ideally @testing-library/vue
adds ESM support.
(please let us know if you know of a better way to deal with this)
It would be really nice to fix this one. None of the setup files for vitest work without the workaround suggested by @purepear (using @testing-library/vue@7.0.0
)
I'm having the same issue. Both config.global.plugins
and config.global.mocks
don't seem to work due to a lack of ESM support by Testing Library mentioned above by @purepear. This should be resolved as soon as possible.
i am facing the same issue with "@testing-library/vue": "^7.0.0"
@purepear thank you for sharing your workaround!