setCompued does not work correctly for mapGetters

[eddyerburgh]

computed: {
    ...mapGetters([
      'isTeamAdmin'
    ]),

    placeholder() {
      return this.isTeamAdmin ? 'Leader' : 'inboxMember'
    }
  }

test.only('placeholder computed is Leader if isTeamAdmin is true', () => {
    wrapper.setComputed({ isTeamAdmin: true });
    expect(wrapper.vm.placeholder).toContain('Leader');
  });

[lmiller1990]

It has been working fine for me with stuff like

computed: {
  something () { return this.$store.getters['module/something']
}

and ...mapState also works fine. I might investigate this if you don't get a chance.

[eddyerburgh]

@lmiller1990 that would be great if you could investigate 😀

I copied this code over from another issue and haven't been able to test myself

[lmiller1990]

Can confirm it does not work. Will look into tomorrow.

import { shallow } from 'vue-test-utils'
import mapGetters from './mapGetters'

test('it works', () => {
  const wrapper = shallow(mapGetters)

  wrapper.setComputed({ isTeamAdmin: true })
  expect(wrapper.vm.placeholder).toEqual('Leader')
})

TypeError: Cannot read property 'isTeamAdmin' of undefined

[lmiller1990]

The below is a minimum failing example that should pass using mapGetters.

<template>
  <div>
    {{ placeholder }}
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'mapGetters',

    computed: {
      ...mapGetters([
        'isTeamAdmin'
      ]),

      placeholder () {
        return this.isTeamAdmin ? 'Leader' : 'inboxMember'
      }
    }
  }
</script>

import Vue from 'vue'
import Vuex from 'vuex'
import { shallow } from 'vue-test-utils'

import mapGetters from './mapGetters'

Vue.use(Vuex)

test('it works', () => {
  let store = new Vuex.Store({
    getters: {
      isTeamAdmin: () => true
    }
  })

  const wrapper = shallow(mapGetters, {
    store
  })

  wrapper.setComputed({ isTeamAdmin: false })

  expect(wrapper.vm.placeholder).toEqual('inboxMember') // fails. Still leader.
})

Edit: If you do return wrapper.setComputed({ isTeamAdmin: false }) it passes. Note I added return. Returning a promise makes Jest wait - that doesn't exactly explain why this works, setComputed doesn't return a promise does it? What's going on here? Hmm...

Edit: I think return in jest automatically wraps it in a promise.

Anyway, so I think the problem is related to the fact that mapGetters is not updated until $nextTick, which the promise returns adds allows the render to occur.

Was do you think we should do for this case @eddyerburgh ? Async test or even flush promises is a good workaround for now but this issue is cropping up a lot.

[wtho]

@lmiller1990 just trying to understand what you meant.

If you do return wrapper.setComputed({ isTeamAdmin: false }) it passes

Do you run the expect before the return? Otherwise it won't be executed at all, and no expectation / assertion means no possible fail.

I might just have misunderstood you though, please clarify.

Edit: Sorry for the confusion, I now understand there was an error thrown before that was somehow avoided with the return statement.

Interestingly enough the error is not avoidable in my setup with mocha using return, so it might actually be wrapped in a promise by jest.

[wtho]

I think I located the origin of the error in Vuex, this.$store being undefined here when querying the getter for its value.

This might a result of this.$options.store not being installed on the $options object, when the Vuex init hook gets executed on beforeCreate.

I do not understand enough about how vue-test-utils' vuex mocking works normally to go further right now.

[rayoplateado]

Hi all!
Any news on this? I'm facing the same problem.

Thank you, guys.

[lmiller1990]

@rayoplateado can you make your test async and use something like flush promises? If you post the code you want to test I can help you in the right direction.

[eddyerburgh]

This will be fixed in beta.9 😀