Router ignores stubs provided to mount

[nlochschmidt]

Version

1.0.0-beta.29

Reproduction link

https://github.com/nlochschmidt/vue-router-test-utils-bug

Steps to reproduce

I attempted to test the properties that are passed to a component that is created by my router. I was following the examples from the docs but didn't want to fully mount the component in question because of it's behaviour on mounting, etc.

Here are the relevant parts from the repository linked above:

router.ts

export default (localVue = Vue) => {
  localVue.use(Router)
  return new Router({
    routes: [
      {
        path: '/',
        name: 'home',
        component: Home
      }
    ]
  })
}

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js   TypeScript App"/>
  </div>
</template>

...

router.spec.ts

describe("router", () => {
  test("should show Home component on /", () => {
    const localVue = createLocalVue()
    const router = createRouter(localVue)
    const wrapper = mount(
      { render: h => h("router-view") }, 
      { 
        localVue, 
        router, 
        stubs: { 
          Home 
        }
      })
  
    expect(wrapper.find(Home).exists()).toBe(true)
    expect(wrapper.find(HelloWorld).exists()).toBe(false) // <- this fails
  })
})

What is expected?

Since Home should be stubbed, the child component HelloWorld, shouldn't get mounted and shouldn't exist when checking wrapper.find(HelloWorld).exists()

What is actually happening?

The stubs configuration is ignored and the Home component actually gets created and mounted.

---

I would also be interested in knowing how else I can check that the correct props are provided to a component without actually creating that component.

[salvadordiaz]

We have a mixed ts/js project and we only recently started to write unit tests in ts (before that we had some in js). All tests are written using mocha/chai and run through mocha-webpack.

What I've found is that mocks, stubs, and other shallowMount/mount options seem to be ignored if I write my tests in typescript, but not if I write them in javascript, even if the components themselves are written in typescript. I still haven't found a way to make the options work in typescript tests, so for now we're reverting to writing only components in typescript, and their unit tests in javascript.

There is another strange behaviour, this time when using the --watch option: if a component uses a method injected by a plugin (in our case it's a method called $translate, you can guess what it does), the first run of the test will work even if the method wasn't defined, but as soon as the test reruns in the same --watch session, there is an error in the console about this method not being defined.