TypeError: Cannot read property 'getters' of undefined

Question

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.

Does your getter happen to be namespaced?

Brandon
– Brandon

2019-02-05 02:09:14 +00:00
Commented Feb 5, 2019 at 2:09 — Brandon
– Brandon, Commented Feb 5, 2019 at 2:09

Programmingjoe · Accepted Answer · 2019-02-06 16:26:25Z

4

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.

edited Feb 6, 2019 at 16:26

answered Feb 5, 2019 at 17:41

Programmingjoe

2,2493 gold badges29 silver badges49 bronze badges

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

Comments

Jeremi G · Accepted Answer · 2019-02-05 03:15:23Z

2

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!

answered Feb 5, 2019 at 3:15

Jeremi G

4212 silver badges8 bronze badges

2 Comments

Programmingjoe Over a year ago

Good catch, but unfortunately it's still not working

Josh Over a year ago

Is it written in the docs like that? vuex.vuejs.org/guide/getters.html

Martin Main · Accepted Answer · 2021-09-02 19:06:35Z

0

For me, this error message came up when I was attempting to load two different store instances that were both importing the same module. By default, Vuex assumes a single store. Something wonky was going on, and this error was the result.

answered Sep 2, 2021 at 19:06

Martin Main

437 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'getters' of undefined

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related