Jest Service Inject Error after v12 upgrade

[Jejuni]

Current Behavior

Assume you have a simple service: MyService, along with potentially many other services logically belonging together. They all reside in a folder called "my-services" and all get individually exported via an index.ts in that folder.

Assume you have then added an index.ts in the parent folder to group and re-export those services under a common moniker like so:

import * as ServiceNamespace from './my-services';

export { ServiceNamespace }

Your component now injects the service as follows:

import { Component } from '@angular/core';
import { ServiceNamespace } from '../services';

@Component({
  selector: 'jest-problem-repro-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(service: ServiceNamespace.MyService) {
    this.message = service.getMessage();
  }
  message: string;
}

This provides no problem for Angular at all and works during dev and prod builds as expected.
Before the v12 upgrade this was also not a problem for running tests.
Now, however, the service can no longer be resolved during test runs. The produced error is:

● AppComponent › should create the app

    This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
    This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.

    Please check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.

Importing the Service directly into the component (by not using the re-export) the test runs fine.

Expected Behavior

Tests run fine no matter how a dependency is imported.

Steps to Reproduce

• npx create-nx-workspace@latest jest-problem-repro
• Add "services" folder under /apps/jest-problem/src
• Add my-service.ts to that folder containing:

import { Injectable } from "@angular/core";

@Injectable({
    providedIn: 'root'
})
export class MyService {
    public getMessage() {
        return 'Hello World!';
    }
}

• Add an index.ts to that folder containing:

import * as ServiceNamespace from './my-service';
export {ServiceNamespace}

• import the service into AppComponent via constructor injection using the "namespace":

constructor(service: ServiceNamespace.MyService) {
    this.message = service.getMessage();
  }
  message: string;

• run the included test that should create the app

Here is a Github repo that shows the issue with the above steps already implemented:
https://github.com/Jejuni/jest-problem-repro

Failure Logs

FAIL jest-problem apps/jest-problem/src/app/app.component.spec.ts
AppComponent
× should create the app (43 ms)

● AppComponent › should create the app

This constructor is not compatible with Angular Dependency Injection because its dependency at index 0 of the parameter list is invalid.
This can happen if the dependency type is a primitive like a string or if an ancestor of this class is missing an Angular decorator.

Please check that 1) the type for the parameter at index 0 is correct and 2) the correct Angular decorators are defined for this class and its ancestors.

  at ɵɵinvalidFactoryDep (../../../packages/core/src/di/injector_compatibility.ts:109:9)
  at NodeInjectorFactory.AppComponent_Factory [as factory] (..\..\ng:\AppComponent\ɵfac.js:5:40)
  at getNodeInjectable (../../../packages/core/src/render3/di.ts:609:38)
  at instantiateRootComponent (../../../packages/core/src/render3/instructions/shared.ts:1145:7)
  at createRootComponent (../../../packages/core/src/render3/component.ts:226:21)
  at ComponentFactory.Object.<anonymous>.ComponentFactory.create (../../../packages/core/src/render3/component_ref.ts:214:19)
  at initComponent (../../../packages/core/testing/src/r3_test_bed.ts:345:28)
  at Object.onInvoke (../../../packages/core/src/zone/ng_zone.ts:405:29)
  at NgZone.Object.<anonymous>.NgZone.run (../../../packages/core/src/zone/ng_zone.ts:184:50)
  at TestBedRender3.Object.<anonymous>.TestBedRender3.createComponent (../../../packages/core/testing/src/r3_test_bed.ts:348:37)
  at Function.Object.<anonymous>.TestBedRender3.createComponent (../../../packages/core/testing/src/r3_test_bed.ts:177:33)
  at src/app/app.component.spec.ts:12:29

Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 2.535 s
Ran all test suites matching /jest-problem-repro\apps\jest-problem\src\app\app.component.spec.ts/i with tests matching "AppComponent".

Environment

NxReport

Node : 14.15.3
OS : win32 x64
npm : 6.14.9

nx : Not Found
@nrwl/angular : 12.4.0
@nrwl/cli : 12.4.0
@nrwl/cypress : 12.4.0
@nrwl/devkit : 12.4.0
@nrwl/eslint-plugin-nx : 12.4.0
@nrwl/express : Not Found
@nrwl/jest : 12.4.0
@nrwl/linter : 12.4.0
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 12.4.0
@nrwl/web : Not Found
@nrwl/workspace : 12.4.0
@nrwl/storybook : 12.4.0
@nrwl/gatsby : Not Found
typescript : 4.2.4

[AgentEnder]

Hey @Jejuni! I was able to reproduce this under an angular cli application using Jest as well. As such, I opened an issue on the jest-preset-angular repository. As soon as that is taken care of we should be able to test inside nx and close this out.

Here is the new issue: thymikee/jest-preset-angular#963
Here is the ng-cli reproduction: https://github.com/AgentEnder/ng-jest-issue-6097

[Jejuni]

Hey @AgentEnder!
Awesome, thanks a lot!

[GreedyA1]

have the same issue

[AgentEnder]

Hey, I'm going to close this issue out since jest-preset-angular has confirmed the issue is on their side. Here is the gh issue I created for them

thymikee/jest-preset-angular#963

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.