NullInjectorError：StaticInjectorError（DynamicTestModule）[AngularFireFunctions]

Question

我想在我的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 。 我的規格文件看起來像這樣

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中，我沒有做任何更改。 可以肯定的是，有一種更清潔的方法可以執行此操作，但是現在它可以正常工作了！

Answer 1

例如，在您的.ts文件中，您使用的是AngularFireFunctions的兩種方法（fun1，fun2）。 然后，您的測試文件應如下所示。 您必須為AngularFireFunctions制作存根，如下所示。

const stub = {
    // whatever the functions you are using in your ts file you have to stub them
    fun1()=>{},
    fun2()=>({ subscribe: () => ({}) }) // if subscribe is there for fun2
}

providers:[
  {provide:AngularFireFunctions,useValue:stub} // here you need to provide stub 
]

注意如果使用的是VS代碼，則將SIMON測試生成器擴展名用於vs代碼。 它只會為您的ts文件和存根生成所有test.spec文件，或者模擬所有依賴項。