RouterLinkStub doesn't seem to supports new slot api?

[existe-deja]

Subject of the issue

I'm testing a Tab handler component. It's highly coupled with router-link. Since v3.1.0 it's recommended to use the slot api to handle complex templates. I have to test the behavior of my logic wich depends on isActive and isExactActive slot props. Currently the RouterLinkStub component doesn't work with the slot api.

Steps to reproduce

components/ToTest.vue

<template>
  <ul>
    <router-link v-slot="{ href, navigate, isActive }" :to="{ name: 'index' }" custom>
      <li :class="{ 'class-logic-to-test': isActive && foo }">
        <a :href="href" @click="navigate">Some link</a>
      </li>
    </router-link>
  </ul>
</template>

<script>
export default {
  name: 'ToTest',

  props: {
    foo: {
      type: Boolean,
      default: true
    }
  }
}
</script>

tests/ToTest.spec.js

import { mount, RouterLinkStub } from '@vue/test-utils'
import ToTest from '@/components/ToTest.vue'

describe('ToTest', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(ToTest, {
      propsData: {
        foo: true
      },
      stubs: {
        RouterLink: RouterLinkStub
      }
    })
    expect(wrapper.html()).toContain('class-logic-to-test')
  })
})

Expected behaviour

The RouterLinkStub component should render the content of the slot. Wich is with the exemple:

<li class="class-logic-to-test">
  <a href="index">Some Link</a>
</li>

Actual behaviour

The component renders:

<a custom=""></a>

Possible Solution

Rewrite the RouterLinkStub component to support the custom props and the slot api

[lmiller1990]

Seems like a bug - probably need to dive into the RouterStub and see what's going on.

[mtlehtin]

Same here. I'm using the new slot api to create custom behaviour.

So in the meanwhile I extended the router-stub for my purposes to something like this. You may need to add custom-prop and some logic to the slot props if needed.

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

// ...

const stubs = {
  RouterLink: {
    ...RouterLinkStub,
    render() {
      return this.$scopedSlots.default({
        href: this.to,
        navigate: jest.fn(),
        isActive: false
      })
    }
  }
}

[lmiller1990]

Sorry guys, all my time is spent on VTU v2 and Vue Jest lately.

I wonder if https://github.com/vuejs/vue-test-utils/pull/1877 will fix this?

Did anyone get to look at this? Happy to give some pointers, I'd love to see this fixed but I can't look at it right now.

[BrevAlessio]

As of today, in 1.3.4, this is not working.

[ebisbe]

@BrevAlessio I think that you can't expect it to be fixed in VTU1 ( sadly ). Based on the last comments from @lmiller1990 in https://github.com/vuejs/vue-test-utils/issues/1564#issuecomment-1424857260 .

So Lachlan, Can I mark this PR as wontfix and close https://github.com/vuejs/vue-test-utils/pull/1877 as it's all related to stubs?

[lmiller1990]

I think this is actually pretty easy to fix, we'd just need to rework https://github.com/vuejs/vue-test-utils/blob/dev/packages/test-utils/src/components/RouterLinkStub.js to do whatever the OP wants - this is kind of different from the others stubs, since we ship a specific implementation, that's apparently out of date.

[ebisbe]

Ok, then I can have a look once I'm back