javascript - Vue-test-utils wrapper undefined - Stack Overflow

admin管理员组

文章数量:1023744

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

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

describe('ProviderComparison ponent', () => {
  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 ponent being mounted, the store, and localVue instance are well-defined.

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

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

describe('ProviderComparison ponent', () => {
  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 ponent being mounted, the store, and localVue instance are well-defined.

• javascript
• vue.js
• unit-testing
• vuejs2
• vue-test-utils

Share Improve this question Follow edited Oct 20, 2021 at 20:03 Riza Khan 3,17055 gold badges2828 silver badges6363 bronze badges asked Oct 1, 2018 at 21:03 Adam FreymillerAdam Freymiller 1,93988 gold badges2828 silver badges5353 bronze badges 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. – Adam Freymiller 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 – Andrius Solopovas Commented Mar 3, 2021 at 18:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

While testing, you have to give the ponent 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 ponent would error out, much like how it would in a real life scenario.

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

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

describe('ProviderComparison ponent', () => {
  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 ponent being mounted, the store, and localVue instance are well-defined.

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

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

describe('ProviderComparison ponent', () => {
  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 ponent being mounted, the store, and localVue instance are well-defined.

• javascript
• vue.js
• unit-testing
• vuejs2
• vue-test-utils

Share Improve this question Follow edited Oct 20, 2021 at 20:03 Riza Khan 3,17055 gold badges2828 silver badges6363 bronze badges asked Oct 1, 2018 at 21:03 Adam FreymillerAdam Freymiller 1,93988 gold badges2828 silver badges5353 bronze badges 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. – Adam Freymiller 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 – Andrius Solopovas Commented Mar 3, 2021 at 18:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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

While testing, you have to give the ponent 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 ponent would error out, much like how it would in a real life scenario.

本文标签： javascriptVuetestutils wrapper undefinedStack Overflow