Bug: Failed setting prop "prefix" on [component]

[Oleksii14]

Describe the bug
There is a set-up with Vitest, Vue 3, and Vuetify 3. When running tests for components that contain Vuetify components there appears a warning about the prefix prop. The full warning looks like this:

[Vue warn]: Failed setting prop "prefix" on <v-text-field-stub>: value undefined is invalid. TypeError: Cannot set property prefix of #<Element> which has only a getter
    at patchDOMProp (/vuetify-project/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:269:17)
    at patchProp (/vuetify-project/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:387:9)
    at mountElement (/vuetify-project/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5164:21)
    at processElement (/vuetify-project/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5136:13)
    at patch (vuetify-project/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5056:21)
    at ReactiveEffect.componentUpdateFn [as fn] (/vuetify-project/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5594:21)
    at ReactiveEffect.run (/vuetify-project/node_modules/@vue/reactivity/dist/reactivity.cjs.js:194:25)
    at instance.update (/vuetify-project/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5701:56)
    at setupRenderEffect (/vuetify-project/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5715:9)
    at mountComponent (/vuetify-project/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5497:9) 
  at <VTextField> 
  at <HelloWorld ref="VTU_COMPONENT" > 
  at <VTUROOT>

To Reproduce

1. Clone the repo
2. yarn install
3. yarn test:unit

Expected behavior
No warnings appear

Related information:
Created issue in Vuetify repo

[Oleksii14]

FYI maybe it is not a bug, but there can be a workaround. Suggestions appreciated

[lmiller1990]

Is using a proper mount function an option like like suggested in Vuetify? You won't be able to test much with shallowMount, anyway - the entire component will be stubbed out.

shallowMount does a lot of strange things under the hood that don't manifest in production - I'd really recommend avoiding using that, and using mount.

[Oleksii14]

@lmiller1990 could you share a link to the Vuetify docs where they recommend that?

[lmiller1990]

shallowMount is not recommended anywhere as far as I know - I never recommend using it. Why do you want to use shallowMount here? You won't be able to interact with the component if it's not properly rendered.

Unless there is a very specific reason to use shallowMount (please share), I think mount is going to be easier to test your components in a more realistic fashion.

[Oleksii14]

The main issue is that I am in progress with the project migration from Vue 2 to Vue 3 and all tests are based on shallowMount. If I follow mentioned way, I need to test/refactor/rework most unit tests in the app which will take much time.

Regarding the recommendation not to use shallowMount, I am not sure I understand why it is not recommended. It simplifies the rendering itself and helps to focus on testing the component's behaviour. Using shallowMount ensures the potential refactoring process would be much easier.

[lmiller1990]

Looking at the warning you get:

at patchDOMProp (/vuetify-project/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:269:17)

Is this line: https://github.com/vuejs/core/blob/a778034a3ecdc12fe6fb5795916962a03d0e3d65/packages/runtime-dom/src/modules/props.ts#L100

It looks like this is just warning - the test should still pass (it does when I run it locally).

If you just want to finish your migration, you could do

NODE_ENV=production yarn test:unit

Warning won't show. Or you can silence the warning like this in your vitest.setup.ts:

const warn = console.warn

// Silence Vuetify and shallowMount specific issue
// @see https://github.com/vuejs/test-utils/issues/2035
console.warn = (...args: any[]) => {
  if (args[0].includes('Failed setting prop "prefix"')) {
    return
  }

  warn(...args)
}

If you'd like to patch this, that'd be fine, but I'm not sure of the cause, or how'd you fix it in Test Utils. shallowMount is pretty complicated and has a lot of undefined behavior.

[freakzlike]

As pointed out in vuetifyjs/vuetify#17185 (comment) the warning occurs because of prefix is already a prop from Element https://developer.mozilla.org/en-US/docs/Web/API/Element/prefix. On stub render we call h('test-comp-stub', {prefix: 'foo'}) which treats test-comp-stub as an Element.

[freakzlike]

We decided to not make any changes to VTU as there are only workarounds with drawbacks. However there are some possible solutions on implementation side: https://test-utils.vuejs.org/guide/faq/#vue-warn-failed-setting-prop