vue-test-utils: Can't find functional component

Hi there, I found that find can’t get functional component. For instance:

import { mount } from 'vue-test-utils'
import functionalComponent from './functionalComponent'
import ParentComponent from './ParentComponent'

const wrapper = mount(ParentComponent);
wrapper.find(functionalComponent); // Can't find it

I know that functional component is instanceless, so it’s understandable that wrapper can’t find it directly. However, that is really hard to test. One way is use ref to mark component but that is not ease-to-use when using multiple functional components in the same time.

Any suggestions to test functional component? Otherwise, how do you think about supporting finding functional component?

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 18 (11 by maintainers)

Most upvoted comments

This issue is still here in v31

Ruudieboy on Feb 12, 2020

Yes im using wrapper.find({ name: 'aa-header' }) for example. Where aa-header is the name of the functional component.

My current workaround is to just add a class or id to the component and find it that way.

Ruudieboy on Feb 12, 2020

This should be reopened

Djaler on Jul 17, 2019

One work around is:

const wrapper = mount(ParentComponent, {
  stubs: {
    functionalComponent: '<div class="functional" />'
  }
})

expect(wrapper.findAll('.functional')).toHaveLength(1)

lmiller1990 on Dec 25, 2017