Vue-test-utils: Store is not available to functional components

[joaovitoras]

Version

1.0.0-beta.29

Reproduction link

https://jsfiddle.net/joaovitoras/37sc6Len/

Steps to reproduce

• Creates a FunctionalComponent that renders the Balloon component
• The Balloon component uses the vuex state in template

• When I mount with VueTestUtils the Main component that contains the Functional Component, store is unavailable and breaks the code

• When I mount with Vue the Main component works fine https://jsfiddle.net/joaovitoras/hnawzo43/

What is expected?

I hope that somehow the store will be available in the component rendered by the functional component

What is actually happening?

store is not available

[dobromir-hristov]

Unfortunately I have no solution for you... What environment are you writing your tests in?

[joaovitoras]

Node: v10.19.0
Packages:
vue: "^2.6.11"vue: "^2.6.11"
vuex: "^3.2.0"
jest": "^24.9.0"
@vue/test-utils": "1.0.0-beta.29"

[lmiller1990]

maybe related https://github.com/vuejs/vue-test-utils/issues/1507

this.$router/this.$store seems not to work in functional component.

[vhoyer]

Well, @joaovitoras, have you tried not using the localVue and using the global instead, I think in your example there is no need for it, right?

[lmiller1990]

You can try ^ however I would expect the same problem to manifest.

Unrelated, but is common to use a non-functional component inside a functional component? This seems very strange to me - functional (aka stateless) components are normally UI only, and the very "bottom" of the render tree.

It seems strange that they would then contain more complexity via a stateful component.

I could be completely wrong here, since I don't have context - in my apps I never render a stateful component inside a functional component.

This is still definitely a bug in VTU that should be fixed. Based on my explorations a few days ago, I have no idea why this happens or how to fix it at this point in time.

[joaovitoras]

Tks @lmiller1990. I decided by changing how the feature was made instead of trying to use vuex with the functional