Recently I've been working on some tests for Vue single-file components with vue-apollo queries and mutations. Unfortunately, there are not so many...
For further actions, you may consider blocking this person and/or reporting abuse
That’s a great article, Natalia, thank you.
Did you ever have to test Vue components with
<apollo-query>
components in it though?How would you encapsulate the data if the query is not in the
apollo
property?To be honest (and it's completely my personal preference) I prefer not to use Vue Apollo components. I know it's a valid way of doing things and it's a default for e.g. React; but I like my query logic separated from the template.
Perhaps I should try to test components with
<ApolloQuery>
and update an article though, thank you for the great question.Yeah, I am starting to think that the benefits do not compensate the issues with both testing and with Storybook.
I am on the verge of ditching them altogether. I find it also frustrating the lack of documentation about it; while at the same time that the vue-apollo docs express the wonders of using these components, they fail to mention how to test them.
Recently there was a recommendation to use
<apollo-query>
components with inline gql-formatted query, as "best practice". But it stopped there, and any component written this way seems to be untestable with current tools.Hi Daniel, I have the same problem, do you have any progress on this?
No, I just ditched the components alltogether.
I am also thinking of moving on from vue-apollo, especially when Vue3 comes around. Maybe try Villus?
I haven't tried it yet but it looks like an interesting option.
I was able to test the component is rendered and receive the correct properties, what I can't achieve is mock the data that the component returns.
My tests look like this so far:
Hello.vue
Hello.spec.js
Hi Natalia, If you do it would be very helpful and should also be in the documentation
You have a great series of blog posts.
One thing we have struggled to test is dynamic queries or variables in smart queries.
I would love to write a test that is something like
It seems like because
vue-apollo
isn't mounted in test we cant test the variables function directly or indirectly as it doesn't exist on thevm
. Is there a way to get at the apollo section of thevm
in test?Cheers!
You can try to play with mocking
$apollo
object on mounting. I've added this section to Vue Apollo docs recently: vue-apollo.netlify.com/guide/testi...Please let me know if it's useful for your case! If it's not, we'll try to figure out the best way to do it
I decided to test the variables functions directly.
the winning incantation is
I'm working a mock provider that provides access to stuff thing this so it's a bit less of a dig to test
Thanks!
I posted a short blog post for people about this
dev.to/focusedlabs/testing-apollos...