Vue-test-utils: Wrapper html is undefined when using router-link

[Ludonope]

Version

1.0.0-beta.15

Reproduction link

https://github.com/Ludonope/VueTestUtilsBugMinimal

Steps to reproduce

git clone https://github.com/Ludonope/VueTestUtilsBugMinimal
cd VueTestUtilsBugMinimal
npm install

Check if the website work with npm run dev. You should see two links "A label" right next to each other.

Then launch unit tests with npm run unit.

What is expected?

Both unit test use a console.log to output the wrapper.html() data.

They should both output the html of MenuButtonRouter and MenuButtonNoRouter.

What is actually happening?

The MenuButtonNoRouter html is correctly displayed (this one use a normal link <a>...</a>).

The MenuButtonRouter html is not displayed, because wrapper.html() returns undefined.

---

Both MenuButtonRouter and MenuButtonNoRouter are almost identical, only the router-link is remplaced by a <a>...</a>.
I tried to fix the unit test following the methods described here: https://vue-test-utils.vuejs.org/en/guides/using-with-vue-router.html
but it didn't worked for me.

[eddyerburgh]

Thanks for the bug report, but this is expected behavior.

shallow stubs all registered components, including components that render slots, like router-link.

You can either use mount, or use the RouterLinkStub component with the stubs mounting option:

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

const wrapper = shallow(TestComponent, {
  stubs: {
    RouterLink: RouterLinkStub
  }
})

[xianxingg]

Tip: you cannot use RouterLinkStub and localValue(which use VueRouter) at the same time.