vue-test-utils: Can't use findComponent with v-slot

Subject of the issue

I’m using Form component with content in the slot. There is its simplified structure (assume that imports are correct):

Form.vue

<template>
  <div>
    Form
    <slot :username="'John'" />
  </div>
</template>

LoginForm.vue

<template>
  <Form>
    <template>
      <FormError :show="true" />
    </template>
  </Form>
</template>

LoginForm.spec.ts

describe('LoginForm', () => {
  test('shows error', () => {
    const wrapper = shallowMount(LoginForm, { localVue })

    expect(wrapper.findComponent(FormError).props('show')).toBeTruthy()
  })
})

Steps to reproduce

Above example is working fine but when I change slot in LoginForm.vue to:

<template>
  <Form>
    <template v-slot="{ username }">
      <FormError :show="!!username" />
    </template>
  </Form>
</template>

I’m getting an error [vue-test-utils]: find did not return Component, cannot call props() on empty Wrapper.

It looks like adding v-slot to the template is making impossible to find component.

Expected behaviour

It is possible to find component with using slot props.

Actual behaviour

Cannot find component with v-slot.

I will be grateful for any kind of explaining this behaviour and providing correct solution 😃

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 15 (7 by maintainers)

Most upvoted comments

@lmiller1990 thanks, my issue was actually related to slots in the end and not a VTU issue, using mount instead of shallowMount solved the problem for another file I was working on so all good in the end!

Thanks for double checking!

alextana92 on Apr 14, 2023

Not sure. Finding a shallow mounted component seems like it’ll lead to a fairly brittle and not very useful test anyway - I wonder if you can use mount, or perhaps describe the component + test case you’d like to write - perhaps someone can offer an alternative recommendation.

lmiller1990 on Apr 13, 2023

I encountered a similar problem trying to check the presence of a component inside a nuxt-link.

For anyone having this issue, using find with an attribute (or any css selector i suppose) did the job for me.

lou-bi on Feb 21, 2022

Sorry not yet, I can look at this on the weekend.

lmiller1990 on Jun 24, 2021

@afontcu @lmiller1990 thank you for a reply! I tried using mount instead of shallowMount and it does not change the error. I was also mounting FormError in localVue which I missed in the example, so correct LoginForm.spec.ts should be:

const localVue = createLocalVue()

localVue.component('FormError', FormError)

describe('LoginForm', () => {
  test('shows error', () => {
    const wrapper = shallowMount(LoginForm, { localVue })

    expect(wrapper.findComponent(FormError).props('show')).toBeTruthy()
  })
})

The problem only occurs when I use v-slot in LoginForm.vue and that’s strange for me. I also checked what wrapper.html() return with v-slot and without.

Without v-slot:

<form>
  <formerror-stub show="true">ERROR</formerror-stub>
</form>

With v-slot used:

<form></form>

patrykgulas on Jan 11, 2021