Testing `$watch` on `$route`

Hi,

I have a test that is using a mock vuex store, and a real router. I want to test if an action is dispatched when the route changes.

I do something like:

SomeComponent:

export default {
  created() {
     this.$store.dispatch('someAction')
  },
  
  watch: {
    '$route' (newVal, val) {
        if (val.params.category !== newVal.params.category) {
          this.$stoore.dispatch('someAction')
        }
    }
  }
    

Test

import router from '../real-router'

describe('SomeComponent', () => {
  let actions;
  let store;

  beforeEach(() => {  
    actions = {
      someAction: jest.fn() // also tried sinon.mock()
    }
    store = new Vuex.Store({ state: {}, actions })
  })

  it('calls action on route change', () => { 
    mount(SomeComponent, { store, router })

    router.push({ name: 'someNamedRoute', params: { category: { 'okok' }})
    
    expect(actions.someAction.mocks.length).toBe(2)
  })
 })
})

For some reason, even though the $watch on the $route is triggering, the mock is not called again. I can confirm it does work in the created hook.

Is there something that would stop the action in a watch/route hook being called? Am I missing something? Or should I write this test different? I want to test that when the route changes, the action is called.

I am happy to contribute again if needed!

Thanks.

[peteringram0]

For anyone else who comes across this issue it seems to be fixed without the need for vue-test-utils.

Working like the following:

it('Should collapse on route change', function (end) {

        const wrapper = mount(Nav, { router });

        wrapper.vm.navExpanded = true;

        expect(wrapper.vm.navExpanded).toBe(true);

        wrapper.vm.$router.push('/about');

        setTimeout(() => {
            expect(wrapper.vm.navExpanded).toBe(false);
            end();
        }, 0);

    });

[lmiller1990]

Reopening (see above comment for repro).