Testing vue-apollo using vue-test-utils

Question

I am new to testing and GraphQL. I am trying to test my VueJS app which uses GraphQL using vue-test-utils and jest. I have a component which gets the categories from a graphql server in mounted hook.

mounted() {
  this.$apollo
    .query({
      query: getCategories
    })
    .then(res => {
      this.categoriesData[0].options = res.data.categories;
    });
}

In my StepTwo.spec.js in I am adding Vue-apollo to vue instance.

const Vue = createLocalVue();
Vue.use(VeeValidate);
Vue.use(BootstrapVue);
Vue.use(VueApollo);

test("Step Two ", async () => {
  const wrapper = shallowMount(StepTwo, { localVue: Vue });
});

When I'm trying to mount my component I'm getting TypeError: Cannot read property 'query' of undefined. Any help would be appreciated.

Lucifer · Accepted Answer · 2019-06-18 04:54:55Z

6

I managed to work it out but I don't know if this is the correct way or not. I mocked $apollo when I was mounting the component.

mocks: {
  $apollo: {
    query: jest.fn(() => Promise.resolve({
      data: {
        categories,
        subCategories: categories
      }
    }))
  }
}

answered Jun 18, 2019 at 4:54

Lucifer

1,0794 gold badges18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wes Harper Over a year ago

This is a pretty common pattern with Vue tests in my experience.

Collectives™ on Stack Overflow

Testing vue-apollo using vue-test-utils

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related