search

frandiox / vue-graphql-enterprise-boilerplate

A GraphQL ready, very opinionated Vue SPA template for Vue CLI 3
120 stars 20 forks source link

How to mock $apollo in Vue tests #43

Closed mikemassari closed 5 years ago

mikemassari commented 5 years ago

Hello. I'm trying to write jest test for my Vue components but every apollo query is met with an error like this

TypeError: Cannot read property 'queries' of undefined

      110 |   computed: {
      111 |     isLoadingChannels() {
    > 112 |       return this.$apollo.queries.channels.loading || false
          | ^
      113 |     },
      114 |   },

Is there any way I can mock the $apollo object?

I've found some tutorials (another one) but don't know how to apply it to this boilerplate. Any help would be greatly appreciated.

frandiox commented 5 years ago

@Michelemassari Hi! I've found that mocking Apollo is quite complex and there are little docs out there for this. Luckily, I've already spent some time in a similar project and managed to do it. I will update this template soon and maybe write some blog post or something.

If you just want to mock the $apollo object you can pass mocks to vue-test-utils or add a global mock in test/setup.js (like this).

For anything more complex than that (like properly mocking queries or mutations) I will need some more time to update this boilerplate.

mikemassari commented 5 years ago

Hey @frandiox. Thanks for the super quick reply!

Could you please give me a quick example of the test/setup.js mock? I would just need something very simple for now for my tests to pass and enable my CI deploy. I would rather not disable all the tests as others are written and needed.

I've tried returnOptions.mocks.$apollo = {} with no luck

frandiox commented 5 years ago

@Michelemassari I have something like this for vue-i18n: vueTestUtils.config.mocks.$t = key => key. I guess vueTestUtils.config.mocks.$apollo = { ... } could work, but not 100% sure.