CODEWITHSUNDEEP
vue.jsvuejs2vue-test-utilsvue-apollo
Lucifer
Lucifer

Reputation: 1079

Testing vue-apollo using vue-test-utils

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.

Upvotes: 1

Views: 2472

Answers (1)

Lucifer
Lucifer

Reputation: 1079

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
      }
    }))
  }
}

Upvotes: 6

Related Questions