Vue Warn error when trying to mount/render the story

[gomorizsolt]

When trying to either mount (@vue/test-utils) or render (@testing-library/vue) the story, the following warning pops up:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Steps to reproduce the behavior

1. Clone https://github.com/gomorizsolt/storybook-testing-vue-issue-2
2. npm install
3. npm run test:unit

Expected: "Apply filters"
Received: "function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }"

Does anyone have any idea on how to circumvent it? Thanks in advance.

[yannbf]

Thanks a lot for opening this issue @gomorizsolt!

@elevatebart do you happen to have any ideas?

[elevatebart]

Essentially, you will want to make an alias for "vue" in jest, making sure it loads the correct version of vue.

Or use this https://cli.vuejs.org/config/#runtimecompiler in testing.

[gomorizsolt]

Hey @yannbf & @elevatebart! 👋 I'd hoped to reply sooner, my apologies.

First off, as an FYI: I've edited my original question and included a repository to reproduce the issue.

On your response, @elevatebart... My expectation would be that it "just" should work out of the box, without additional configurations. That said, I tried the runtimeCompiler option but to no avail - the test still didn't pass.

Essentially, you will want to make an alias for "vue" in jest, making sure it loads the correct version of vue.

If you're referring to setting the { 'vue$': 'vue/dist/vue.esm.js' } alias then it didn't help either.

Regardless of which testing library is being used, both of them expects a Vue component. However, when the result of Primary() is logged to the console it doesn't quite resemble a component.

Could any of you guys point me in the right direction? I'd appreciate it, thanks.

[raphael-yapla]

Hey everyone, I'm also having the exact same issue, would love to have some guidance here.

@gomorizsolt Were you able to find a solution?

[raphael-yapla]

I found a solution, in case anyone is having the same problem (maybe future me), here's what you need to add if you're using Jest to the moduleMapper in the jest.config.js file:

'^vue$': 'vue/dist/vue.common.dev.js'

I think it would be great to mention it somewhere in the documentation, it would prevent a lot of future potential headaches.

[yannbf]

Hey @raphael-yapla would you mind putting up a PR referencing that? Thank you so much! <3

[raphael-yapla]

@yannbf Here you go! Hope that helps :)