Vue-test-utils: Testing a functional component isn't the same as a regular one (propsData)

[Haroenv]

Version

1.0.0-beta.24

Reproduction link

https://codesandbox.io/s/pjlwznqq1m

Steps to reproduce

• Make a functional component
• mount it with propsData

What is expected?

props are passed to the component

What is actually happening?

no props are passed to the component

---

You can only test a functional component with context.props, not with propsData as with other components, which means that what used to be an internal implementation detail (what kind of component it is) becomes public API for the tests now and needs to be changed if that component changes of type. See what I expected to work in the first assertion, and what eventually worked in the second assertion. I didn't find anything about this in the docs.

import { mount } from '@vue/test-utils';
import FunctionalComponent from './FunctionalComponent';

it("doesn't allow you to pass propsData", () => {
  // this doesn't work but I'd like it to
  const wrapper = mount(FunctionalComponent, {
    propsData: {
      someProp: 'hi there',
    },
  });

  expect(wrapper.html()).toMatchSnapshot();
});

it('only allows you to pass context', () => {
  const wrapper = mount(FunctionalComponent, {
    context: {
      props: {
        someProp: 'hi there',
      },
    },
  });

  expect(wrapper.html()).toMatchSnapshot();
});

[abrenneke]

Could we have a props option which delegates to either propsData or context.props depending on what type of component is being mounted?

[lemmycaution]

Hi, updating documentation can save poor little fellows time. It took me almost an hour that it's actually an issue belongs to vue-test-utils.

[ktquez]

Any solution?

[Haroenv]

a functional component works like the second example test in my post

[lmiller1990]

I am going to take responsibility for this. I think we should do to things

1. update docs (definitely, this is a no brainer)
2. have the same API for functional and non-functional, and a check somewhere in the codebase depending if the component is functional or not (if there is a way to know if a component is functional, not sure if there is)

If it turns out we cannot detect if a component is functional or not, I'll abandon (2) and just do (1).

[Haroenv]

Thanks @lmiller1990, that sounds like a great resolution to me!

[lmiller1990]

@Haroenv so it looks like this is actually fixed? Upgrading your reproduction repro to beta-30 (or beta-29, looks like beta-28 broke this) shows all green.

Going to close this one, unless I missed something. Googlers, update your version of vue-test-utils to the latest (if possible) or at least beta-29.

[Haroenv]

I wasn't aware this was fixed, this is great news @lmiller1990, thanks!