import{mount,createLocalVue}from'@vue/test-utils'importVueApollofrom'vue-apollo'importHellofrom'@/components/Hello'constlocalVue=createLocalVue()localVue.use(VueApollo)describe('Hello.vue',()=>(){test('renders an ApolloQuery component',()=>{constwrapper=moun(Hello,{localvue,// To remove error in render: "TypeError: Cannot read property 'loading' of undefined"// More info about this https://github.com/vuejs/vue-apollo/issues/609 $apolloData:{loading:false},})// I'm using a custom directive v-test that transform this v-test="{id: 'foo'}" to [data-test-id=foo]constapolloQuery=wrapper.find('[data-test-id=apollo-query]')expect(apolloQuery.exists()).toBe(true)expect(apolloQuery.props().query).toBe(require('@/graphql/MY_QUERY').default)expect(apolloQuery.props().variables).toEqual({id:1})expect(apolloQuery.props().notifyOnNetworkStatusChange).toBeTruthy()})})
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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