mocks only works for top component

[blake-newman]

I never realized mocks was only for the component in question - I thought it would be available to all the children, too 🤔

It sounds like this should be the default behavior.

Originally posted by @lmiller1990 in #1701 (comment)

---

The mocks object is only set for the first component; not it's children. This behaviour means that properties such as $route / $router are not easily mockable via integration style testing.

There is ways around this, by using localVue and creating a router instance and setting on the mount options.

[lmiller1990]

I was not able to reproduce this (or maybe I misunderstood?) eg, I could mock $store.state in a child component like this:

import { mount, config } from '@vue/test-utils'

const Foo = {
  template: `
    <div>
      Count: {{ $store.state.count }}
    </div>
  `
}

const App = {
  components: { Foo },
  template: `
    <div>
      <Foo /> 
    </div>
  `
}

const $store = {
  state: {
    count: 1
  }
}

test('with vuex', () => {
  const wrapper = mount(App, {
    mocks: {
      $store
    }
  })

  expect(wrapper.html()).toContain('Count: 1')
})

[lmiller1990]

Pls lmk if my repro is wrong - this seems fine to me.