vue.js - 如何使用 Jest 修复测试的 Apollo 设置？

Question

我的目标是使用 jest 设置 Apollo 进行一些测试。
在调试器中，该$apollo属性的所有属性都等于 undefined 或者是空对象。provider并client包括在内。

为了简单起见，我当前重用了文档的设置。所以我在 ts 文件中有一个简单的配置

import VueApollo from 'vue-apollo';
import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = createHttpLink({
  uri: 'http://localhost:3020/graphql' // will change later
});

const cache = new InMemoryCache();

const apolloClient = new ApolloClient({
  link: httpLink,
  cache
});

const fakeApolloProvider = new VueApollo({
  defaultClient: apolloClient
});

export default fakeApolloProvider;

然后在我做的测试文件里面

import VueApollo from 'vue-apollo';
import fakeApolloProvider from './mockApolloForAutocompleteInput';
import AutocompleteInput from '../AutocompleteInput.vue';


const localVue = createLocalVue();
localVue.use(VueApollo);

wrapper = shallowMount(AutocompleteInput, {
  localVue,
  mocks: {
    fakeApolloProvider
  }
});

组件安装正确。

在组件中：

const { AIProviders } = require('@/graphql/AutocompleteInput.graphql');

@Component {
  apollo: {
    client: 'provider'
    query: AIProviders,
    manual: true,
    deep: true,
    // more setup variable(), skip(), result()
  }
}
export default class AutocompleteInput extends Vue { 
 // component definition
}

感谢帮助

标签： vue.jstestingjestjsvue-apollo