Refactoring options api to use `vue-router/composables` break basic unit tests

Heya! 👋 While I was waiting for the 3.6.x release, I rolled some in-house vue-router hooks as per https://github.com/vuejs/vue-router/issues/3760#issuecomment-1191774443. This allowed refactoring some options-API components to composition-api "mode" while keeping my test suite intact.

I thought the refactor to use the official package hooks would be a simple find/replace but my test suite broke. After some digging, the reason is that the hooks implementation relies on router.currentRoute property and afterEach hook, which made the tests using the simplest $route mock as suggested in vue-test-utils docs to fail.

https://github.com/vuejs/vue-router/blob/e3273b3db905f0d162d57725fba0c459ea5bb463/src/composables/globals.js#L23-L30

Steps

Giving a basic options API component

<!-- using composition API -->
<template>
   <div>{{ msg }}</div>
</template>

<script>
import { useRoute } from 'vue-router/composables';
import { computed } from 'vue';

export default {
  computed: {
      msg() {
         return `My route name is ${this.$route.name}`;
      }
  }
};
</script>

refactoring to composition api

<!-- Refactoring using composition-api -->
<script>
import { useRoute } from 'vue-router/composables';
import { computed } from 'vue';

export default {
  setup() {
    const $route = useRoute();
    const msg = computed(() => {
      `My route name is ${$route.name}`;
    });

    return {
      msg,
    };
  },
};
</script>

The test that worked before, now breaks.

import { mount } from '@vue/test-utils';
import SomeComponent from './SomeComponent.vue';

const $route = {
  path: '/some/path',
};

function Wrapper() {
  return mount(SomeComponent, {
    mocks: {
      $route,
    },
  });
}

test('mount component',  () => {
  const wrapper = Wrapper();

  expect(wrapper.exists()).toBe(true);
  // TypeError: Cannot read properties of undefined (reading 'currentRoute')
});

One of The Fixes

import { mount } from '@vue/test-utils';
import SomeComponent from './SomeComponent.vue';

const $route = {
  path: '/some/path',
};

function Wrapper() {
  return mount(SomeComponent, {
    mocks: {
-      $route,
+      $router: { currentRoute: $route, afterEach: vitest.fn() },
    },
  });
}

test('mount component',  () => {
  const wrapper = Wrapper();

  expect(wrapper.exists()).toBe(true);
});

...or setting up a router with localVue as per docs... or stubbing modules jest.mock().

Expectations

using options/composition-api should not affect the test suite output — implementation details?!

Reproducing Demos

Example using options-api (passing) https://stackblitz.com/edit/vitejs-vite-rdjvxj?file=src/views/About.test.js
Same Example using composition-api (failing) https://stackblitz.com/edit/vitejs-vite-exqdxv?file=src/views/About.test.js

@vue/test-utils@1.3.4
vue@2.7.13
vue-router@3.6.5
`vitest` (can be any test runner)

Question

If you've went this way, I'm sure there are good reasons for it. But curious on why didn't you gt with a similar approach as vue-router@4, as in, with a reactive object derived from getCurrentInstance().proxy.$route as per https://github.com/vuejs/vue-router/pull/3763/commits/f1eb2b1dba9b5cc5011b230a3121c882d883c4c0#diff-2042e0452c0d0edd730403740acc8d4337382101087ad62a677e1e2fdae05e8fR8-R17 which kept tests working without any change — but surely break some other stuff.

Cheers and thanks for your work on the router! Feel free to close this if you think it's related with @vue/test-utils docs instead ✌️

vuejs / vue-router