vite-plugin-vue
vite-plugin-vue copied to clipboard
Edit isCustomElement filtering during vitest runtime
Related plugins
-
[X] plugin-vue
-
[ ] plugin-vue-jsx
Description
Using Vitest based on vite config, when using for example:
vue({
customElement: true,
template: {
compilerOptions: {
isCustomElement: tag => tag.includes('-'),
},
},
}),
I want to be able to edit the isCustomElement filtering during the test run. In fact, when testing web components using vue test utils, there are 2 scenarios:
1- If isCustomElement is set to true on this webcomponent, we can no more apply a stub on it as it is totally ignored. But we can still do wrapper.find(...).trigger('customEvent', { detail: 'HelloWorld' })
2- If isCustomElement is set to false on this webcomponent, it's possible to createa stub for this component, but without creating a stub It is no more possible to trigger custom events, as we can only trigger DOM events, for example click, submit or keyup but no custom events.
Suggested solution
During the test case, before launching the mount(). If we have the ability to change the isCustomElement filtering. We can decide which scenario we can apply:
1- no stubs but ability to fire custom events
2- stubs but no ability to fire custom events
Alternative
I didn't find any alternative to have all the possibilities: Ability to stub the webcomponent & Ability to fire custom events
Additional context
No response
Validations
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.