The beforeMount hook is called for the second time when route is updated to the same component

[serebrov]

Version

1.0.0-beta.30

Reproduction link

https://github.com/serebrov/vue-test-utils-router-push-issue

Steps to reproduce

The issue: components beforeMount hook is called for the second time when route is updated to the same component

• We start with /
• We go to the /user/1/post1 (points to the component with children)
• The beforeMount is called
• We go to the /user/1/post2 (points to the same component)
• The beforeMount is called again

What is expected?

Expected: beforeMount is called only once (it works this way in the real vue app and in 1.0.0-beta.29)

What is actually happening?

Problem: the beforeMount is called again

• This only happens in tests, not in the real app
• This works in v1.0.0-beta.29, but fails in v1.0.0-beta.30 and up
• The issue is only reproduced when we use Vue.extend to define the component (or with class-based components)
• Breaking change: this commit, changes with _Ctor = {} assignments.

---

Details

The demo setup: https://github.com/serebrov/vue-test-utils-router-push-issue

The failing test passes successfully in beta 29, but fails in beta 30:

$ npm install @vue/test-utils@1.0.0-beta.29
  @vue/test-utils@1.0.0-beta.29

$ npm run test:unit
...
  router.push
beforeMount App
[!] beforeMount Parent
beforeMount Nested
beforeRouteUpdate Parent
beforeRouteUpdate Nested
    ✓ calls beforeMount only once

  2 passing (48ms)

 MOCHA  Tests completed successfully

Now, install and run with beta 30:

$ npm install @vue/test-utils@1.0.0-beta.30
  @vue/test-utils@1.0.0-beta.30

$ npm run test:unit

...
 MOCHA  Testing...

  router.push
beforeMount App
[!] beforeMount Parent
beforeMount Nested
beforeRouteUpdate Parent
beforeRouteUpdate Nested
[!] beforeMount Parent
beforeMount Nested
    1) calls beforeMount only once

  1 failing

  1) router.push
       calls beforeMount only once:

      AssertionError: expected 2 to equal 1
        expected - actual

      -2
       1

      at Context.it (dist/js/webpack:/tests/unit/router.spec.js:83:1)
      at process._tickCallback (internal/process/next_tick.js:68:7)

The issue was introduced by this commit, changes with _Ctor = {} assignments.
If these assignments are commented out, the tests starts working.

It also works if we don't use Vue.extend to define the component:

  ...
  {
    path: "/user/:id",
    // It works, if we don't use Vue.extend.
    component: {
    // component: Vue.extend({
      // Component with children, nested router-view.
      render: function (h) {
        return h("router-view");
      },
   ...

And Vue.extend is needed for typescript-based setup, to have the typing working for components (also, I am actually using vue class-based components which is the best setup I found to make use of typescript checks for Vue components).

One more note: I was not able to reproduce the issue with vue test utils codebase - the same test passes with beta 30 codebase (although, I am not sure if I am doing something wrong with the setup or the this is something in the tests setup affecting the behavior).
There is a modified version that runs the same test twice and it passes for the first time and then fails the second time, but I am not sure if this is the exact same issue as described above, but maybe it will be useful too.

Test project setup

Test project is generated with vue cli (default settings unit-mocha, vue router and vue test utils):

npm install -g @vue/cli
vue create router-test
vue add unit-mocha
npm install --save @vue/test-utils@1.0.0-beta.30

[lmiller1990]

Wow, great bug report.

This change broke a lot of things. I have no idea why that change was made (seems like no existing maintainers do) and it was reverted here: #1479

I will do a release this week with this bugfix included. Will this solve your problem?

[serebrov]

Awesome! I didn't expect it to be resolved that soon and yes, the changes reverted in #1479 are the exact same bits that I also found to be problematic.

[lmiller1990]

It's out

https://github.com/vuejs/vue-test-utils/releases/tag/v1.0.0-beta.33

lmk if it fixes your problem

[serebrov]

It works now, thanks!