Apollo-Angular Testing - Does not work if I follow the Instructions

[CalaxDev]

Describe the bug

I have setup my Apollo Testing according to https://apollo-angular.com/docs/development-and-testing/testing#apollotestingmodule Now when I run the Testsuite, it fails with an Error Message like "NullInjectorError: No provider for Apollo!"

It is to note that I am using GraphQLCodeGen to generate code based on my graphql-Files and Server Schema, but that should not be an issue here.

My code looks just like the following: app.component.ts

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { catchError, EMPTY, map, Observable, shareReplay } from 'rxjs';
import { GetTestsGQL, GetTestsQuery } from "../generated/graphql"

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'testproject';
  constructor(private getTestsGQL: GetTestsGQL) {

  }

  getTests() {
    return this.getTestsGQL.watch().valueChanges
      .pipe(
        map(result => result.data.tests),
        shareReplay(1),
        catchError(() => { alert("error in fetching tests!"); return EMPTY; }))
  }
}

app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

import { GetTestsDocument } from "../generated/graphql"
import { ApolloTestingModule, ApolloTestingController, } from 'apollo-angular/testing';

describe('TestComponent', () => {
  let controller: ApolloTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ApolloTestingModule],
    });

    controller = TestBed.inject(ApolloTestingController);
  });

  afterEach(() => {
    controller.verify();
  });

  it('should get all tests', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;

    //Call the relevant method
    app.getTests().subscribe((r) => {
      //Make some assertions about the result;
      expect(r[0].name).toEqual("Test 1");
      expect(r[1].name).toEqual("Test 2");
    });

    // The following `expectOne()` will match the operation's document.
    // If no requests or multiple requests matched that document
    // `expectOne()` would throw.
    const op = controller.expectOne(GetTestsDocument);

    // Respond with mock data, causing Observable to resolve.
    op.flush({
      data: {
        tests: [
          { name: 'Test 1' },
          { name: 'Test 2' }
        ]
      },
    });

    // Finally, assert that there are no outstanding operations.
    controller.verify();
  });
});

It fails with:

> testproject@0.0.0 test:ci
> ng test --browsers=ChromeHeadlessNoSandbox --no-watch --code-coverage

✔ Browser application bundle generation complete.
26 03 2022 11:31:26.907:INFO [karma-server]: Karma v6.3.17 server started at http://localhost:9876/
26 03 2022 11:31:26.909:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
26 03 2022 11:31:26.913:INFO [launcher]: Starting browser ChromeHeadless
26 03 2022 11:31:27.673:INFO [Chrome Headless 100.0.4889.0 (Windows 10)]: Connected on socket csdt7WbN-PrCQZGVAAAB with id 56373412
Chrome Headless 100.0.4889.0 (Windows 10) TestComponent should get all tests FAILED
        NullInjectorError: R3InjectorError(DynamicTestModule)[GetTestsGQL -> Apollo -> Apollo]: 
          NullInjectorError: No provider for Apollo!
        error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'GetTestsGQL', 'Apollo', 'Apollo' ] })
        NullInjectorError: R3InjectorError(DynamicTestModule)[GetTestsGQL -> Apollo -> Apollo]:
          NullInjectorError: No provider for Apollo!
            at NullInjector.get (node_modules/@angular/core/fesm2015/core.mjs:11120:1)
            at R3Injector.get (node_modules/@angular/core/fesm2015/core.mjs:11287:1)
            at R3Injector.get (node_modules/@angular/core/fesm2015/core.mjs:11287:1)
            at injectInjectorOnly (node_modules/@angular/core/fesm2015/core.mjs:4765:1)
            at ɵɵinject (node_modules/@angular/core/fesm2015/core.mjs:4769:1)
            at Object.GetTestsGQL_Factory [as factory] (ng:///GetTestsGQL/ɵfac.js:4:44)
            at R3Injector.hydrate (node_modules/@angular/core/fesm2015/core.mjs:11457:1)
            at R3Injector.get (node_modules/@angular/core/fesm2015/core.mjs:11276:1)
            at NgModuleRef.get (node_modules/@angular/core/fesm2015/core.mjs:21832:1)
            at Object.get (node_modules/@angular/core/fesm2015/core.mjs:21509:1)

To Reproduce Setup and follow the instructions on the Getting Started (https://apollo-angular.com/docs/get-started) and then the Testing (https://apollo-angular.com/docs/development-and-testing/testing) pages

Expected behavior

Working Tests according to the docs

Environment: Windows 10, Node v16.14.2, npm v7.13.0

├── @angular/cli@13.2.5
├── @angular/core@13.2.5
├── @apollo/client@3.5.10
├── apollo-angular@3.0.0
├── graphql@15.8.0
└── typescript@4.5.5

[Cito]

This seems to be the same as #1759.

[CalaxDev]

This seems to be the same as #1759.

Yes!

To anyone stumbling across this issue until it's resolved/patched/released, please refer to issue 1759 as linked above and view damienwebdevs answer. It's a temporary fix to get things running again.