Closed tirithen closed 3 years ago
Hi! I have no experience with integrating vue and WC, so I'm not sure I could be of any help here. Just some basic questions: does this happen when using Vue Test Utils (not vue testing library!) alone?
The tests are ran with vue-cli-service test:unit --coverage
. I'm not sure that I understand the difference in "Vue Test Utils" and "vue testing library", hopefully the usage of vue-cli-service
gives some hints.
If the testing tools would try to lookup the existence of the Web Component before logging with Boolean(customElements.get('sp-textfield'))
(https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/get) the problem would probably be possible to avoid. Now it seems to miss that even if the tag
A similar question was asked here as well https://forum.vuejs.org/t/iscustomelement-in-jest/107226
Does that give some more insight on the problem?
If you're using vue-cli-service and haven't installed Vue Testing Library (this repo) manually, then you're only using the official Vue Test Utils package (the official testing tools for Vue: https://github.com/vuejs/vue-test-utils-next/). If that's the case, I'd open an issue there, and see what we can come up with :)
Describe the bug A clear and concise description of what the bug is.
Produces warnings during tests run about external Web Component dependencies.
All the tests still runs as usual and produces a valid result.
To Reproduce Steps to reproduce the behavior:
npm install --save @spectrum-web-components/textfield
import '@spectrum-web-components/textfield/sp-textfield.js';
<sp-textfield id="name-0" placeholder="Enter your name"></sp-textfield>
Expected behavior
Tests should run without warning about Web Components that actually are available. (possibly they could just be looked up via standard browser API
customElements.get(componentName)
)Related information:
@testing-library/vue
version:Vue
version: 3.0.10node
version: v15.13.0npm
version: 7.7.6@testing-library/vue
version: 6.4.0Additional context
For the development server I use vite (version: 2.1.5) with the following
vite.config.js
:Before adding
compilerOptions.isCustomElement
there was warnings in the vite server as well, but once added in the config they went away.However with
@testing-library/vue
there is no clear place to put the correspondingcompilerOptions
.How can I configure that build? Or even better yet, run the tests with the same build setup that vite already gives?