8

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.

4
  • Any clues from the console? Do you have a link to a GitHub repo that demonstrates the problem?
    – 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. Commented Oct 2, 2018 at 20:05
  • 3
    @AdamFreymiller could you post your solution here and accept it?
    – whme
    Commented Oct 31, 2019 at 11:13
  • @AdamFreymiller please share the solution Commented Mar 3, 2021 at 18:19

1 Answer 1

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.

2
  • Is there a way to find out what the component needs? or if a nested component is failing? Commented Oct 17, 2022 at 1:16
  • Check all the props/imports that are used within the component. Child components can be mocked I believe.
    – Riza Khan
    Commented Oct 17, 2022 at 12:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.