NullInjectorError:StaticInjectorError(DynamicTestModule)[AngularFireFunctions]

时间:2019-11-27 16:34:22

标签: angular firebase jestjs angularfire nrwl

我想在我的nrwl / angular工作区中以开玩笑的方式对服务进行单元测试。 我要测试的服务如下所示。

@Injectable({ providedIn: 'root' })
@CollectionConfig({ path: 'orgs/:orgId/baskets' })
export class BasketService extends CollectionService<BasketState> {
  syncQuery = syncQuery.bind(this, basketsQuery(this.organizationQuery.getActiveId()));

  constructor(
   ....
    private functions: AngularFireFunctions,
    store: BasketStore
  ) {
    super(store);
  }

CollectionService来自akita-ng-fire。 我的 spec 文件如下所示:

describe('BasketService', () => {
  let serivce: BasketService;

  beforeAll(() => {
    TestBed.configureTestingModule({
      imports: [AngularFireModule.initializeApp(firebase), AngularFireFunctionsModule],
      providers: [
        AngularFirestore,
        BasketService,
        AngularFireFunctions,
        {
          provide: FirestoreSettingsToken,
          useValue: { host: 'localhost:8080', ssl: false }
        },
        {
          provide: FirebaseOptionsToken,
          useValue: { projectId: firebase.projectId }
        }
      ]
    })
    serivce = TestBed.get(BasketService);
  });

但是每次我运行此测试时,都会出现此错误:

  NullInjectorError: StaticInjectorError(DynamicTestModule)[AngularFireFunctions]: 
      StaticInjectorError(Platform: core)[AngularFireFunctions]: 
        NullInjectorError: No provider for AngularFireFunctions!

我很确定我错过了要导入或提供值的东西。但我不知道是什么...

更新/解决方案

我必须解决很多小问题。 我正在版本8中运行Angular。因此,我将jest-preset-angular更新到了版本8。我正在运行版本7。然后,我安装了ts-jest并更新了jest.config.js,如下所示:

module.exports = {
  globals: {
    'ts-jest': {
      tsConfig: './tsconfig.spec.json',
      stringifyContentPathRegex: '\\.html$',
      astTransformers: [
        'jest-preset-angular/build/InlineFilesTransformer',
        'jest-preset-angular/build/StripStylesTransformer'
      ]
    }
  },
  setupFilesAfterEnv: ['./test-setup.ts'],
  resolver: '@nrwl/jest/plugins/resolver',
  verbose: true,
  transform: {
    '^.+\\.(ts|js|html)$': 'ts-jest'
  },
  testEnvironment: 'jest-environment-jsdom-thirteen',
  moduleFileExtensions: ['ts', 'html', 'js', 'json'],
  transformIgnorePatterns: ['node_modules/(?!@ngrx)'],
  snapshotSerializers: [
    'jest-preset-angular/build/AngularSnapshotSerializer.js',
    'jest-preset-angular/build/HTMLCommentSerializer.js'
  ]
};

我还在工作空间的根目录中添加了一个test-setup.ts文件,该文件仅导入了jest-preset-angular。 在同一级别上,我添加了tsconfig.spec.ts

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc/global-custom-jest-integration",
    "module": "commonjs",
    "types": ["jest", "node"]
  },
  "files": ["./test-setup.ts"],
  "include": ["**.spec.ts", "**.d.ts"]
}

在angular.json中,我没有做任何更改。 可以肯定的是,有一种更清洁的方法可以执行此操作,但是现在它可以正常工作了!

0 个答案:

没有答案