angular - 带有 Jest 的 Angular：因无法使用不同的导入找到提供者而失败的测试

Question

我有一个带有 Jest 的 Angular 应用程序，所有测试都运行良好。组件注入服务：

组件.ts：

import { FooService } from '../../services/foo.service'; // relative import

constructor(private foo: FooService) {}

组件.spec.ts：

import { FooService } from '@services/foo.service'; // alias import

describe('FooComponent', () => {
  let component: FooComponent;
  let fixture: ComponentFixture<FooComponent>;

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      imports: [....],
      providers: [ { provide: FooService, useValue: { bar: () => {} } ],
      declarations: [FooComponent],
      schemas: [NO_ERRORS_SCHEMA]
    })
    .compileComponents();
    ....   
  }));
});

两个导入指的是相同的 foo.service.ts，但使用不同的导入形式：TypeScript alias vs relative path。

别名在 tsconfig.json 中定义：

"paths": {
  "@services/*": ["./app/services/*"]
}

和 Jest 配置：

"moduleNameMapper": {
  "@services/(.*)": "<rootDir>/src/app/services/$1"
}

我已切换到 nx 工作区，并且测试开始失败，并出现错误提示FooService没有提供程序：

NullInjectorError: R3InjectorError(DynamicTestModule)[FooService -> FooService]: 
  NullInjectorError: No provider for FooService!

我已经设法使用相同形式的导入来修复它- 服务和测试都必须使用别名导入或相对导入。

我想了解这里有什么问题。看起来 Angular/Jest 正在基于 TypeScript 路径（在 Nx 工作区中）进行注入令牌/依赖项解析。有什么解释这是如何工作的吗？

标签： angulartypescriptinjection-tokens