mercredi 22 avril 2020

How to fix theís Apollo setup for the tests using Jest?

My goal is to setup Apollo for some tests using jest.
In the debugger, the $apollo property has all its properties equal to undefined or are empty objects. provider and client included.

For the sake of simplicity I reuse currently the setup of the documentation. So I have a simple config in a ts file

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;

Then inside the test file I do

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

The component mount properly.

And in the component :

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
}

Thanks for help

Aucun commentaire:

Enregistrer un commentaire