How to replace a vuex getter after a wrapper has been mounted

[dobromir-hristov]

What problem does this feature solve?

If a component is mounted in beforeEach with a mocked Vuex Store, how do you change a getter implementation in the store just for one test? The store is already mounted so replacing with .mockImplementationOnce doesnt work.
Currently I need to recreate the store and remount the component for that to work.

  beforeEach(() => {
    $api = $apiFactory()
    social = {
      namespaced: true,
      getters: {
        availablePages: jest.fn(() => {}),
        connectedPages: jest.fn(() => []),
        numberOfConnectedPages: () => 0,
        numberOfAvailableSocialPages: jest.fn(() => 0),
        isFetchingPages: () => false
      },
      actions: {
        fetchSocialPages: jest.fn(() => Promise.resolve()),
        fetchSocialAccounts: jest.fn(() => Promise.resolve())
      },
      mutations: {}
    }
    store = createStore() // helper function that just returns a new store from the predefined variables
    wrapper = createWrapper() // helper function that just mounts a component from predefined variables
  })

it('lists all the pages in the dom', () => {
    social.getters.availablePages.mockImplementationOnce(() => ({
      facebook: [
        { id: 1, name: 'Some Page', category: 'Some category' },
        { id: 2, name: 'Some Page 2', category: 'Some category 2' }
      ]
    }))
    social.getters.numberOfAvailableSocialPages.mockImplementationOnce(() => 2)
    store = createStore()
    wrapper = createWrapper()
    expect(wrapper.vm.availablePages).toHaveProperty('facebook')
    expect(wrapper.vm.numberOfAvailableSocialPages).toBe(2)
    expect(wrapper.vm.availablePages['facebook']).toHaveLength(2)
    expect(wrapper.find('.availableSocialPages').exists()).toBe(true)
    expect(wrapper.findAll('.socialProvider__page')).toHaveLength(2)
  })

What does the proposed API look like?

If we can have a refresh or remount method on the wrapper that would refresh the component.
Other way would be to feed it a new Store but I dont think that is possible at all.

[eddyerburgh]

What weould the API look like?

wrapper.reMount(mountingOptions)?

I don't think that's something that should be added to the library.

FYI I write tests by creating a fresh wrapper in each test. If I have lots of repetition, I writecreateWrapper and createStore factory functions

[dobromir-hristov]

@eddyerburgh OK cool, so same as my workflow :) I just wanted to do a check if I am doing it wrong or not.

[mwager]

You may also use smt like:

const wrapper = mount...
Object.defineProperty(wrapper.vm, 'someComputedProp', { 
  value: () => {
    return 'value you want'
  }
})

[gsusmonzon]

Thanks @mwager , I ended up doing something like

Object.defineProperty(wrapper.vm, 'someComputedProp', { value: undefined, writable: true })
...
wrapper.vm.someComputedProp = 0
await wrapper.vm.$forceUpdate()
...
wrapper.vm.someComputedProp = 10
await wrapper.vm.$forceUpdate()
...