8

Im currently trying to introduce testing to my Vue 3 Vite application.
I am using jest and vue-test-utils for this.
This is working fine, except when I try to mount components that contain my base components, which I introduce with app.component(basecomponent) before I app.mount("#app"); in my application.
While the test still run, I get the error:

[Vue warn]: Failed to resolve component: base-card 
      at <Anonymous ref="VTU_COMPONENT" > 
      at <VTUROOT>

Now my question is, what would be the best way to make this accessible to the test? Or what have I alternatively done wrong since this does not work?
Thanks for all answers in advance :)

stackmeister
  • 199
  • 1
  • 2
  • 10

2 Answers2

16

You can add components on mount via global.components:

const wrapper = mount(Component, {
  global: {
    components: {
      'base-card': BaseCard
    }
  }
})

Alternatively, you can include the components globally using config:

// jest.setup.js

import { config } from '@vue/test-utils'

config.global.components = {
  'base-card': BaseCard
}
Jaye Renzo Montejo
  • 1,812
  • 2
  • 12
  • 25
1

@stackmeister Did you make an import of this component in your test? You can try to add this part of code too:

    components: {
    base-card
  },
Kipo CTO
  • 35
  • 5
  • Is this also necessary when using shallowMount? I still get the warning for all my components even when using shallowMount. My components are not global components. – Casper Slynge Jul 08 '21 at 08:40