Angular 使用 Apollo：单元测试：错误：尚未定义客户端

Posted 2023-03-10

【中文标题】Angular 使用 Apollo：单元测试：错误：尚未定义客户端

【英文标题】：Angular using Apollo: Unit testing: Error: Client has not been defined yet

【发布时间】：2020-08-31 00:17:00

【问题描述】：

我正在为 graphql 使用 apollo 客户端。我在导入 AppModule 的 GraphQLModule 中设置了客户端。我正在一项服务中进行查询，该服务也直接在 AppModule 中导入。 但我收到此错误：错误：尚未定义客户端 已经尝试过：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 - 此测试通过。

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 - 此测试失败并抛出错误：尚未定义客户端

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

);

【参考方案1】：

将导入：[GraphQLModule] 添加到您的 TestBed.configureTestingModule：

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