Test run logs [Vue warn] for Web Components used in project

[tirithen]

Describe the bug A clear and concise description of what the bug is.

Produces warnings during tests run about external Web Component dependencies.

console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40
    [Vue warn]: Failed to resolve component: c-icon 
      at <FbElementActionBar element= { type: 'input-text', _id: 3, _parent: 2, _position: 0 } ref="VTU_COMPONENT" > 
      at <VTUROOT>

All the tests still runs as usual and produces a valid result.

To Reproduce Steps to reproduce the behavior:

1. Add a Web Component to you project npm install --save @spectrum-web-components/textfield
2. Import the Web Component in your Vue component import '@spectrum-web-components/textfield/sp-textfield.js';
3. Use the Web Component in a Vue components template <sp-textfield id="name-0" placeholder="Enter your name"></sp-textfield>
4. Write a test that uses the Vue component

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.10
• node version: v15.13.0
• npm version: 7.7.6
• @testing-library/vue version: 6.4.0

Additional context

For the development server I use vite (version: 2.1.5) with the following vite.config.js:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  base: './',
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        secure: false,
        ws: true
      }
    }
  },
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => {
            return tag.startsWith('c-') || tag.startsWith('sp-');
          }
        }
      }
    })
  ]
});

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 corresponding compilerOptions.

How can I configure that build? Or even better yet, run the tests with the same build setup that vite already gives?

[afontcu]

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?

[tirithen]

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 is registered and working as intended.

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?

[afontcu]

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 :)