Vue-test-utils wrapper undefined

Question

I have the following test suite in Jest for a component. I have successfully written unit tests for several other components that follow a similar structure:

import { createLocalVue, mount } from '@vue/test-utils'
import Vuex from 'vuex'
import storeMock from '@mocks/store'
import RequestProposalsContainer from '@/components/RequestProposals/RequestProposalsContainer'

describe('ProviderComparison component', () => {
  let localVue, store, wrapper, storeSetup

  beforeEach(() => {
     localVue = createLocalVue()
     localVue.use(Vuex)

     storeSetup = storeMock()
     store = new Vuex.Store(storeSetup)
     /* wrapper is undefined and I'm not sure why */
     wrapper = mount(RequestProposalsContainer, {
       localVue,
       store
     })
  })

  it('renders correct structure', () => {
     /* undefined */
     console.log('wrapper: ', wrapper)
  })
})

By inspection, the component being mounted, the store, and localVue instance are well-defined.

Any clues from the console? Do you have a link to a GitHub repo that demonstrates the problem? — tony19
– tony19, Commented Oct 2, 2018 at 0:42
I took a look at more of the console errors and it turned out I needed to add necessary fields in the mock store, as well as add a stub for the router. Question has been resolved. — Adam Freymiller
– Adam Freymiller, Commented Oct 2, 2018 at 20:05
@AdamFreymiller could you post your solution here and accept it? — whme
– whme, Commented Oct 31, 2019 at 11:13

Riza Khan · Accepted Answer · 2021-10-21 00:38:06Z

3

I was in a similar situation where the wrapper would come back undefined.

While testing, you have to give the component everything it needs to render.

It was (as @Adam Freymiller has already alluded to) that all the required values (props, store values, etc) were not set in the test, so the component would error out, much like how it would in a real life scenario.

answered Oct 21, 2021 at 0:38

Riza Khan

3,2385 gold badges30 silver badges63 bronze badges

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

2 Comments

null-point-exceptional Over a year ago

Is there a way to find out what the component needs? or if a nested component is failing?

Riza Khan Over a year ago

Check all the props/imports that are used within the component. Child components can be mocked I believe.

Collectives™ on Stack Overflow

Vue-test-utils wrapper undefined

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related