Allow stubbing globally registered components (eg <router-view />)

[cyberb]

I am using router mock and my test works fine, but I get this warning because I have a router-view:

console.warn node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:40
    [Vue warn]: Failed to resolve component: router-view 
      at <VueApp ref="VTU_COMPONENT" > 
      at <VTUROOT>

Test: https://github.com/syncloud/platform/blob/98bf6a15da825533248df78b46d8b0ac9787de35/www/tests/unit/VueApp.spec.js
Adding stubs did not help:

global: {
  mocks: {
    $route: mockRoute,
    $router: mockRouter
  },
  stubs: ['router-view']
}

[cexbrayat]

Hi @cyberb

I usually use:

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

mount(Navbar, {
    global: {
      stubs: {
        RouterLink: RouterLinkStub
      }
    }
  });

or just RouterLink: true.

Can you give this a try?

[lmiller1990]

We might need to include a RouterViewStub too? You could try something like this:

stubs: {
  RouterView: true
}

To match the name property - this is one way we figure out how to stub things.

Alternatively, I have had luck registering a global component too (since that is what Vue Router does):

global: {
  components: {
     RouterView: { render() { return h('div') } }
  }
}

The line between stubs and component is kind of blurred. I wonder if we should make this distinction more clear? Eg stubs for locally registered components, components�for global ones (like RouterLink and RouterView).

What do you guys think?

[cexbrayat]

Ha yes, I misread the OP and answered with RouterLink, sorry @cyberb ! RouterView: true works 👍

@lmiller1990 I agree that we should also provide a RouterViewStub for convenience.

For your other question, it is indeed a bit confusing that you can use one or the other in some cases. Wouldn't it be weird to limit components to globally registered ones as the same name in a component is for locally registered ones?

[lmiller1990]

@cexbrayat maybe... it looks like you can either use global.components or stubs with little to no difference most of the time. 🤔

Does it make sense to provide RouterLinkStub OR RouterViewStub at all? The alternative is RouterViewStub: true, which is actually more concise.

@cyberb does this discussion solve your problem?

[cexbrayat]

RouterLinkStub is nice when you want to check the props given to it. I guess RouterView is less useful you're right: looking at our codebases, we don't use it. I think we need to take a deeper look at stubs vs components indeed.

[cyberb]

Forgot to mention that I use shallowMount (because of this #250)
This does not help (warning is still there)

  shallowMount(VueApp, {
    global: {
      stubs: {
        RouterView: true
      },
      mocks: {
        $route: mockRoute,
        $router: mockRouter
      }
    }
  })

But this one removes the warning!

  shallowMount(VueApp, {
    global: {
      components: {
        RouterView: { render() { return h('div') } }
      },
      mocks: {
        $route: mockRoute,
        $router: mockRouter
      }
    }
  })

[cyberb]

With mount:

mount(VueApp, {
    global: {
      stubs: {
        RouterView: true
      }
    }
)

Says: Failed to resolve component: router-view

mount(VueApp, {
    global: {
      components: {
        RouterView: { render() { return h('div') } }
      }
    }
)

Says: ReferenceError: h is not defined

[lmiller1990]

For the last one, did you remember to do import { h } from 'vue'?

I will pull your repo and play with this tomorrow and let you know what I find.

[lmiller1990]

Ok, I tried it. I was not able to stub either router-link or router-view with stubs. I believe this is because those are registered globally, stubs only seems to cover components that are locally imported.

For now you can work around this (well, it's not really a work-around - this does make sense - I am registered this missing global components with some dummy tags):

import { h } from 'vue'

  it('stubs router-link and router-view', () => {
    const stub = (name: string, tag: string) => ({ 
      name,
      render() {
        return h(tag)
      }
    })

    const wrapper = mount(ComponentWithRouter, {
      global: {
        components: {
          RouterLink: stub('RouterLink', 'span'),
          RouterView: stub('RouterView', 'h3'),
        }
      }
    })
  })

I guess the question is should we take all stubs and globally registered them for the users? My instinct is yes, this is the expected behavior.

I actually ran into this once before when stubbing <Transition> by default - I had to add a specific check for that, see here.

@cexbrayat @cyberb do you think we should update the stub logical to also registered those components globally?

[cyberb]

For the last one, did you remember to do import { h } from 'vue'?

thanks, this one is ok now!

[cyberb]

Just in case, this one is more than enough for me and you can close the issue:

components: {
    RouterView: { render() { return h('div') } }
}

[lmiller1990]

I think we need to include anything in stubs globally as well. I will leave this issue open to track this.