Skip to content

Components only returning a render function from setup aren't considered components #1596

@LeBenLeBen

Description

@LeBenLeBen

Subject of the issue

Components using the Composition API that return a render function from setup are not considered valid Vue Components by the internal validator. Consequently, they can’t be used as stubs.

Steps to reproduce

Have a component using the composition API without template and where the render function is returned by the setup function:

import { defineComponent, createElement } from '@vue/composition-api';

export default defineComponent({
  name: 'CFlexItem',

  setup(props, { slots }) {
    return () => {
      return createElement("div", {}, slots.default && slots.default());
    };
  },
});

When trying to mount it like this:

import CFlex from './CFlex';
import CFlexItem from './CFlexItem';

mount(CFlex, {
  stubs: {
    CFlexItem
  },
  slots: {
    default: [
      '<CFlexItem>1</CFlexItem>',
      '<CFlexItem>2</CFlexItem>',
      '<CFlexItem>3</CFlexItem>',
    ],
  },
});

Vue-test-utils throws the following error:

[vue-test-utils]: options.stub values must be passed a string or component

Theses components’ code can be found here.

Expected behaviour

Vue components using solely a render function through setup should be considered valid components.

Possible Solution

Adapt isVueComponent method to handle this specific kind of components. But I’m not sure how this should be done, hints welcome so I can potentially submit a PR.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions