Angular using Apollo: Unit testing: Error: Client has not been defined yet

Question

I'm using apollo client for graphql. I set up the client in GraphQLModule which I'm importing in AppModule. I'm making a query in a service which is also imported right in the AppModule. But i get this error: Error: Client has not been defined yet Tried already: Angular - Apollo: Client has not been defined yet.

grapgql.module.ts

import { NgModule } from '@angular/core';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { environment } from 'src/environments/environment';
import { GraphqlService } from './graphql.service';

const uri = 'https://api.example.com/graphql';
export function createApollo(httpLink: HttpLink) {
    return {
        link: httpLink.create({ uri }),
        cache: new InMemoryCache(),
    };
}

@NgModule({
    exports: [
        ApolloModule,
        HttpLinkModule
    ],
    providers: [
        {
            provide: APOLLO_OPTIONS,
            useFactory: createApollo,
            deps: [HttpLink],
        },
        GraphqlService,
    ],
})
export class GraphQLModule { }

graphsl.service.spec.ts - this test passes.

import { TestBed } from '@angular/core/testing';

import { GraphqlService } from './graphql.service';
import { Apollo } from 'apollo-angular';

describe('GraphqlService', () => {
    let service: GraphqlService;

    beforeEach(() => {
        TestBed.configureTestingModule({
            providers: [
                GraphqlService,
                Apollo
            ]
        });
        service = TestBed.inject(GraphqlService);
    });

    it('should be created', () => {
        expect(service).toBeTruthy();
    });
});

app.module.ts - this test fails and throws error: Client has not been defined yet

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { GraphQLModule } from './graphql/graphql.module';
import { HttpClientModule } from '@angular/common/http';
import { CmTableModule } from './shared/cm-table/cm-table.module';
import { CmComponentsModule } from './shared/cm-components/cm-components.module';
import { CmDirectivesModule } from './shared/cm-directives/cm-directives.module';
import { CmPipesModule } from './shared/cm-pipes/cm-pipes.module';
import { CmDragDropModule } from './shared/cm-drag-drop/cm-drag-drop.module';
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { GraphqlService } from './graphql/graphql.service';


const uri = 'https://api.example.com/graphql';
export function createApollo(httpLink: HttpLink) {
    return {
        link: httpLink.create({ uri }),
        cache: new InMemoryCache(),
    };
}
@NgModule({
    declarations: [
        AppComponent,
    ],
    exports: [
        ApolloModule,
        HttpLinkModule
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        NoopAnimationsModule,
        GraphQLModule,
        HttpClientModule,
        CmTableModule,
        CmComponentsModule,
        CmPipesModule,
        CmDirectivesModule,
        CmDragDropModule,
        ApolloModule,
        HttpLinkModule
    ],
    providers: [{
        provide: APOLLO_OPTIONS,
        useFactory: createApollo,
        deps: [HttpLink],
    },
        GraphqlService],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.spec.test

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { GraphqlService } from './graphql/graphql.service';
import { Apollo, ApolloModule } from 'apollo-angular';

describe('AppComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                RouterTestingModule,
                ApolloModule
            ],
            declarations: [
                AppComponent
            ],
            providers: [
                GraphqlService,
                Apollo
            ]
        }).compileComponents();
    }));

    it('should create the app', () => {
        const fixture = TestBed.createComponent(AppComponent);
        const app = fixture.componentInstance;
        expect(app).toBeTruthy();
    });

});

Answer 1

Add imports: [GraphQLModule] to your TestBed.configureTestingModule:

TestBed.configureTestingModule({
        imports: [
            RouterTestingModule,
            **GraphQLModule**,
            ApolloModule
        ],
        declarations: [
            AppComponent
        ],
        providers: [
            GraphqlService,
            Apollo
        ]
    }).compileComponents();