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

Question

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

Jaye Renzo Montejo · Accepted Answer · 2022-01-09 14:51:00Z

19

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
}

edited Jan 9, 2022 at 14:51

answered Jul 6, 2021 at 13:07

Jaye Renzo Montejo

1,9022 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kipo CTO · Accepted Answer · 2021-05-07 16:31:08Z

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

answered May 7, 2021 at 16:31

Kipo CTO

356 bronze badges

1 Comment

Casper Slynge Over a year ago

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related