CODEWITHSUNDEEP
vue.jsjestjsvue-test-utils
stackmeister
stackmeister

Reputation: 239

Vue testing with jest and vue-test-utils fails to resolve components introduced through app.component()

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

Upvotes: 11

Views: 9908

Answers (2)

Jaye Renzo Montejo
Jaye Renzo Montejo

Reputation: 1862

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
}

Upvotes: 19

Kipo CTO
Kipo CTO

Reputation: 35

@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
  },

Upvotes: 1

Related Questions