使用 vue-test-utils 测试 vue-apollo

Question

我是测试和 GraphQL 的新手。我正在尝试使用 vue-test-utils 和 jest 测试使用 GraphQL 的 VueJS 应用程序。我有一个组件，它从挂载钩子中的 graphql 服务器获取类别。

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

在我的 StepTwo.spec.js 中，我正在将 Vue-apollo 添加到 vue 实例中。

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

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

当我尝试安装我的组件时，我得到了 TypeError: Cannot read property 'query' of undefined。任何帮助将不胜感激。

Answer 1

我设法解决了，但我不知道这是否正确。我在挂载组件的时候嘲笑了$apollo

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

使用 vue-test-utils 测试 vue-apollo

Testing vue-apollo using vue-test-utils

vue.js

vuejs2

vue-test-utils

vue-apollo