Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeError: Cannot read property 'getters' of undefined

I'm trying to test a basic Vue Component that makes reference to a Vuex store. I thought I followed Vue's example (https://vue-test-utils.vuejs.org/guides/using-with-vuex.html#mocking-getters) to a T but it doesn't appear to be working.

I get the error that is mentioned in the title.

const localVue = createLocalVue()
localVue.use(Vuex)

describe('Navbar.vue', () => {
  let store: any
  let getters: any

  beforeEach(() => {
    getters: {
      isLoggedIn: () => false
    }

    store = new Vuex.Store({
      getters
    })
  })

  it('renders props.title when passed', () => {
    const title = 'Smart Filing'
    const wrapper = shallowMount(Navbar, {
      propsData: { title },
      i18n,
      store,
      localVue,
      stubs: ['router-link']
    })

    expect(wrapper.text()).to.include(title)
  })
})

I'm using class components so maybe that has something to do with it?

@Component({
  props: {
    title: String
  },
  computed: mapGetters(['isLoggedIn'])
})
export default class Navbar extends mixins(Utils) {}

Thanks in advance.

like image 859
Programmingjoe Avatar asked Feb 05 '19 01:02

Programmingjoe


2 Answers

The "getters" here is not properly assigned:

  beforeEach(() => {
    getters: {
      isLoggedIn: () => false
    }

    store = new Vuex.Store({
      getters
    })
  })

It should be getters = {... rather than getters: {... because your argument to beforeEach is a function and not an object.

I can confirm that it is indeed correctly written in the documentation.

Good luck!

like image 172
Jeremi G Avatar answered Nov 11 '22 10:11

Jeremi G


Figured it out.

When you declare the getter in the component, make sure to define the variable that is going to be used.

@Component({
  props: {
    title: String
  },
  computed: mapGetters(['isLoggedIn'])
})
export default class Navbar extends mixins(Utils) {
  isLoggedIn!: boolean <== I did not have this before. 
  ...
}

Edit: Also, I wasn't actually using the mock getter in the test so you don't even need to mock the store. All you need to do is declare that variable on the component.

like image 23
Programmingjoe Avatar answered Nov 11 '22 11:11

Programmingjoe