Apollo-angular: Apollo tests fail with --codeCoverage but pass without

Created on 30 Sep 2019 · 7Comments · Source: kamilkisiela/apollo-angular

Intended outcome:
Running ng test --codeCoverage=true --no-watch should pass, since running without --codeCoverage passes

Actual outcome:
The test fails with TypeError: Cannot read property 'use' of undefined this looks to be in (http://localhost:9877/_karma_webpack_/node_modules/apollo-angular/fesm2015/ngApollo.js:239:1). It seems Apollo is not being injected correctly.

How to reproduce the issue:
When testing a Query from apollo-angular in a service (not a component) the tests will pass when run normally but will fail when generating code coverage. See the repository at https://github.com/aaraggornn/apollo-error-test for a reproduction.

Run npm run test to pass and npm run test:cc to fail (using --codeCoverage)

Versions
"apollo-angular": "^1.7.0",
"apollo-client": "^2.6.4",
"typescript": "~3.5.3",
"@angular/core": "~8.2.8",
"graphql": "^14.5.8",
"graphql-tag": "^2.10.1",

Source

aaraggornn

👍6

Most helpful comment

@aaraggornn I have found a temporary workaround. You'll need to inject Apollo manually in the extended Mutation class and call super() with the provided apollo instance:

import { Injectable } from '@angular/core';
import { Mutation, Apollo } from 'apollo-angular';
import gql from 'graphql-tag';

@Injectable({ providedIn: 'root' })
export class SomeMutationGQL extends Mutation {

  constructor(apollo: Apollo) {
    super(apollo); // <-- use this to prevent  the error from throwing
  }

  public document = gql`
    mutation ...
  `;
}

It will work with --codeCoverage turned on.

nicky-lenaers on 5 Dec 2019

👍4

All 7 comments

This also happens with apollo-angular 1.8.0

aaraggornn on 28 Oct 2019

👍1

I noticed the error comes from this line, where this.apollo is referenced and its method use() is invoked (this causes the error apparently).

I don't know why this happens only when code coverage is enabled, but hopefully this info helps for debugging the problem a bit faster.

nicky-lenaers on 4 Dec 2019

@aaraggornn I have found a temporary workaround. You'll need to inject Apollo manually in the extended Mutation class and call super() with the provided apollo instance:

import { Injectable } from '@angular/core';
import { Mutation, Apollo } from 'apollo-angular';
import gql from 'graphql-tag';

@Injectable({ providedIn: 'root' })
export class SomeMutationGQL extends Mutation {

  constructor(apollo: Apollo) {
    super(apollo); // <-- use this to prevent  the error from throwing
  }

  public document = gql`
    mutation ...
  `;
}

It will work with --codeCoverage turned on.

nicky-lenaers on 5 Dec 2019

👍4

Hi. I have same problem with using apollo-graphql with Angular 9.

havran on 31 Jan 2020

We have the same strange problem in our project. Please fix.

LukasMachetanz on 5 Feb 2020

Our solution was to ignore generated GraphQL types for the coverage. Perhaps this is related to the instrumentation of the generated code.

// https://github.com/thymikee/jest-preset-angular#brief-explanation-of-config
module.exports = {
  preset: 'jest-preset-angular',
  roots: ['src'],
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
  moduleNameMapper: {
    '@app/(.*)': '<rootDir>/src/app/$1',
    '@assets/(.*)': '<rootDir>/src/assets/$1',
    '@core/(.*)': '<rootDir>/src/app/core/$1',
    '@env': '<rootDir>/src/environments/environment',
    '@src/(.*)': '<rootDir>/src/src/$1',
    '@state/(.*)': '<rootDir>/src/app/state/$1',
  },
  transformIgnorePatterns: ['node_modules/(?!(jest-test))'],
  coverageReporters: ['html', 'text'],
+ coveragePathIgnorePatterns: ['/node_modules/', 'src/app/modules/graphql/types/generated.ts'],
};

Hope this helps.