Question

在我的项目中，我使用apollo代码生成器来生成用于graphql查询的打字稿接口和查询服务。我的组件看起来像这样。

component.ts

//Some Imports...

@Component({
  templateUrl: //URL...,
})
export class OverviewProjectComponent implements OnInit{

  constructor(readonly projectsService: AdminListProjectsGQL) {}

  private _queryObserver:BehaviorSubject<Observable<ApolloQueryResult<AdminListProjectsQuery>>> = new BehaviorSubject(EMPTY);
  private _response: Observable<ApolloQueryResult<AdminListProjectsQuery>>;

  ngOnInit(): void {
    this._queryObserver.next(this.projectsService.fetch());
    this._response = this._queryObserver.pipe(switchAll());
    this._response.subscribe(result => {
      //Doing something with the response...
    });
  }
}

这是我使用的生成代码：

export const AdminListProjectsDocument = gql`
     //Graphql Query...
    `;

  @Injectable({
    providedIn: 'root'
  })
  export class AdminListProjectsGQL extends Apollo.Query<AdminListProjectsQuery, AdminListProjectsQueryVariables> {
    document = AdminListProjectsDocument;
  }

该组件工作正常，将请求数据，并且响应将达到应有的状态。《 Apollo文档》提供了有关如何测试使用graphql查询的Angular组件的说明。我不确定这些信息是否重要，但是在此项目中使用了Jasmine测试框架。测试看起来像这样。

//Some other imports
import {
  ApolloTestingModule,
  ApolloTestingController,
} from 'apollo-angular/testing';

import { OverviewProjectComponent } from "./overview-project.component";
import { AdminListProjectsDocument } from "../../../generated/graphql";

describe("OverviewProjectComponent", () => {
  async function createComponent() {
    await TestBed.configureTestingModule({
      imports: [
        ApolloTestingModule,
        //Some other Modules I need
      ],
      providers: [
        //Some Providers I need
      ],
      declarations: [
        OverviewProjectComponent,
      ],
    }).compileComponents();

    let fixture = TestBed.createComponent(OverviewProjectComponent);
    let component = fixture.componentInstance;

    fixture.detectChanges();

    const controller = TestBed.inject(ApolloTestingController);

    return {
      fixture,
      component,
      controller,
      element: fixture.nativeElement as HTMLElement,
    };
  }

  it(`can be instantiated`, async () => {
    const t = await createComponent();

    expect(t.component).toBeDefined();
  });
});

执行测试后，我在控制台中收到以下2条错误消息：

TypeError: this.apollo is undefined in http://localhost:9876/_karma_webpack_/vendor.js (line 150395)
    fetch@http://localhost:9876/_karma_webpack_/vendor.js:150395:9
    ngOnInit@http://localhost:9876/_karma_webpack_/main.js:6815:51
    callHook@http://localhost:9876/_karma_webpack_/vendor.js:68637:18
    callHooks@http://localhost:9876/_karma_webpack_/vendor.js:68601:25
    executeInitAndCheckHooks@http://localhost:9876/_karma_webpack_/vendor.js:68542:18
    refreshView@http://localhost:9876/_karma_webpack_/vendor.js:74905:45
    renderComponentOrTemplate@http://localhost:9876/_karma_webpack_/vendor.js:75013:20
    tickRootContext@http://localhost:9876/_karma_webpack_/vendor.js:76482:34
    detectChangesInRootView@http://localhost:9876/_karma_webpack_/vendor.js:76516:20
    detectChanges@http://localhost:9876/_karma_webpack_/vendor.js:78156:46
    _tick@http://localhost:9876/_karma_webpack_/vendor.js:108143:32
    detectChanges/<@http://localhost:9876/_karma_webpack_/vendor.js:108160:26
    invoke@http://localhost:9876/_karma_webpack_/polyfills.js:5568:30
    ./node_modules/zone.js/dist/proxy.js/</ProxyZoneSpec.prototype.onInvoke@http://localhost:9876/_karma_webpack_/vendor.js:188553:43
    invoke@http://localhost:9876/_karma_webpack_/polyfills.js:5567:36
    onInvoke@http://localhost:9876/_karma_webpack_/vendor.js:101521:33
    invoke@http://localhost:9876/_karma_webpack_/polyfills.js:5567:36
    run@http://localhost:9876/_karma_webpack_/polyfills.js:5327:47
    run@http://localhost:9876/_karma_webpack_/vendor.js:101351:91
    detectChanges@http://localhost:9876/_karma_webpack_/vendor.js:108157:25
    createComponent/<@http://localhost:9876/_karma_webpack_/main.js:6082:21
    fulfilled@http://localhost:9876/_karma_webpack_/vendor.js:186126:58
    invoke@http://localhost:9876/_karma_webpack_/polyfills.js:5568:30
    ./node_modules/zone.js/dist/proxy.js/</ProxyZoneSpec.prototype.onInvoke@http://localhost:9876/_karma_webpack_/vendor.js:188553:43
    invoke@http://localhost:9876/_karma_webpack_/polyfills.js:5567:36
    run@http://localhost:9876/_karma_webpack_/polyfills.js:5327:47
    scheduleResolveOrReject/<@http://localhost:9876/_karma_webpack_/polyfills.js:6061:40
    invokeTask@http://localhost:9876/_karma_webpack_/polyfills.js:5603:35
    ./node_modules/zone.js/dist/proxy.js/</ProxyZoneSpec.prototype.onInvokeTask@http://localhost:9876/_karma_webpack_/vendor.js:188584:43
    invokeTask@http://localhost:9876/_karma_webpack_/polyfills.js:5602:40
    runTask@http://localhost:9876/_karma_webpack_/polyfills.js:5371:51
    drainMicroTaskQueue@http://localhost:9876/_karma_webpack_/polyfills.js:5773:39

和

    TypeError: Cannot read property 'use' of undefined
        at <Jasmine>
        at AdminListProjectsGQL.fetch (http://localhost:9876/_karma_webpack_/node_modules/apollo-angular/__ivy_ngcc__/fesm2015/ngApollo.js:252:1)
        at OverviewProjectComponent.ngOnInit (http://localhost:9876/_karma_webpack_/src/app/admin/project/overview-project.component.ts:83:2)
        at callHook (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4686:1)
        at callHooks (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4650:1)
        at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:4591:1)
        at refreshView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11814:1)
        at renderComponentOrTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11922:1)
        at tickRootContext (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13391:1)
        at detectChangesInRootView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:13425:1)
        at RootViewRef.detectChanges (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:15103:22)

我对apollo角客户端完全陌生，所以我不知道可能是什么问题。感谢您的帮助！

测试角度分量时{this.apollo未定义

0 个答案: