Question

[上下文] ：这就是问题。我目前正在尝试使用jest，jasmine和angular TestBed模块为angular 8中的组件构建一些单元测试。该组件非常基础，一个可通过API获取的数据表，并且可以编辑数据。

这是我的规格文件的示例：

jest.mock('../../../services/external-actors.service');
// jest.mock('@angular/material/snack-bar');
jest.mock('@fuse/services/translation-loader.service');
jest.mock('../../../services/snackbar.service');
jest.mock('../../../services/permission/permission.service');

describe('ListExternalActorsComponent', () => {
    beforeEach(async(() => {

        TestBed.configureTestingModule({
            imports: [
                MatSnackBarModule,
                MatTableModule,
                MatMenuModule,
                TranslateModule.forRoot({
                    loader: TranslateFakeLoader,
                }),
            ],
            providers: [
                MatSnackBar,
                { provide: MatDialog },
                // { provide: TranslateService },
                { provide: FuseTranslationLoaderService },
                { provide: SnackbarService },
                { provide: PermissionService },
                { provide: ExternalActorsService },
            ],
            declarations: [
                ListExternalActorsComponent
            ],
            schemas: [NO_ERRORS_SCHEMA],
        }).compileComponents();


        beforeEach(inject([], () => { 
            fixture = TestBed.createComponent(ListExternalActorsComponent);
            component = fixture.componentInstance;
            fixture.detectChanges();
        }));
        afterEach(() => {
            fixture.destroy();
        });
    }));

    it('should instantiate', inject([], () => {
        expect(fixture).toBeDefined();
        console.log('FIXTURE >>>>>', fixture);
        console.log('COMPONENT >>>>>', component);
    }));
});

[问题]：

当我启动测试时，上面的代码示例正在工作，但是fixture和component是未定义，并且expect(fixture).toBeDefined();引发错误。
当我尝试将组件创建移动到it()部分内部时，

it('should instantiate', inject([], () => {
        fixture = TestBed.createComponent(ListExternalActorsComponent);
        component = fixture.componentInstance;
        fixture.autoDetectChanges():
        console.log('FIXTURE >>>>>', fixture);
        console.log('COMPONENT >>>>>', component);
    }));

以下是由组件创建行（TestBed.createComponent(ListExternalActorsComponent)）引起的错误：

NullInjectorError: StaticInjectorError(DynamicTestModule)[ListExternalActorsComponent -> MatSnackBar]: 
      StaticInjectorError(Platform: core)[ListExternalActorsComponent -> MatSnackBar]: 
        NullInjectorError: No provider for MatSnackBar!Error: NullInjectorError: No provider for MatSnackBar!

      at NullInjector.get (../packages/core/src/di/injector_compatibility.ts:205:21) [angular]
      at resolveToken (../packages/core/src/di/injector.ts:315:20) [angular]
      at tryResolveToken (../packages/core/src/di/injector.ts:257:12) [angular]
      at StaticInjector.get (../packages/core/src/di/injector.ts:146:14) [angular]
      at resolveToken (../packages/core/src/di/injector.ts:315:20) [angular]
      at tryResolveToken (../packages/core/src/di/injector.ts:257:12) [angular]
      at StaticInjector.get (../packages/core/src/di/injector.ts:146:14) [angular]
      at resolveNgModuleDep (../packages/core/src/view/ng_module.ts:125:25) [angular]
      at NgModuleRef_.get (../packages/core/src/view/refs.ts:507:12) [angular]
      at resolveDep (../packages/core/src/view/provider.ts:423:43) [angular]
      at createClass (../packages/core/src/view/provider.ts:283:24) [angular]
      at createDirectiveInstance (../packages/core/src/view/provider.ts:136:20) [angular]
      at createViewNodes (../packages/core/src/view/view.ts:303:28) [angular]
      at createRootView (../packages/core/src/view/view.ts:210:3) [angular]
      at callWithDebugContext (../packages/core/src/view/services.ts:630:23) [angular]
      at Object.debugCreateRootView [as createRootView] (../packages/core/src/view/services.ts:122:10) [angular]
      at ComponentFactory_.create (../packages/core/src/view/refs.ts:93:27) [angular]
      at initComponent (../../packages/core/testing/src/test_bed.ts:589:28) [angular]
      at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:117:43) [angular]
      at Object.onInvoke (../packages/core/src/zone/ng_zone.ts:273:25) [angular]
      at NgZone.run (../packages/core/src/zone/ng_zone.ts:171:50) [ProxyZone]
      at TestBedViewEngine.createComponent (../../packages/core/testing/src/test_bed.ts:593:56) [ProxyZone]
      at Function.TestBedViewEngine.createComponent (../../packages/core/testing/src/test_bed.ts:232:36) [ProxyZone]
      at app/app/admin/external-actors/list-external-actors/list-external-actors.spec.ts:61:27 [ProxyZone]
      at TestBedViewEngine.execute (../../packages/core/testing/src/test_bed.ts:477:15) [ProxyZone]
      at ../../packages/core/testing/src/test_bed.ts:668:53 [ProxyZone]
      at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:117:43) [ProxyZone]

有什么想法最好或应该使用用TestBed创建组件的方法，以及为什么这种可爱的MatSnackBar在某些情况下不能正常工作？

谢谢

使用TestBed组件创建和未定义的固定装置时出现MatSnackBar错误

0 个答案: