带有 mockedService 的 Angular 测试不返回模拟数据

Question

显然，我仍然缺少对模拟服务的重要理解，我很乐意提供一些意见。

我想在我的组件中测试的代码是：

modulesToDisplay: any[] = [];

...

getModules() {
  this.configService.getModulesToDisplay().subscribe(modules => {
    this.modulesToDisplay = modules;
    }
  );
}

我想测试当我从服务中获取某些内容时是否重新分配了 modulesToDisplay。因此，在我的 Testfile 中，我创建了一个 serviceMock，它返回一个包含两个项目的数组

let configServiceMock: any;

...

beforeEach(async(() => {
  configServiceMock = jasmine.createSpyObj('ConfigService', ['getModulesToDisplay']);
  configServiceMock.getModulesToDisplay.and.returnValue( of(['firstmodule', 'secondmodule']) );

  ...

providers: [
        { ConfigService, useValue: configServiceMock }
      ]
    }).compileComponents();

  beforeEach(() => {
    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

    it('should assign result to modulesToDisplay', () => {
    component.getModules();
    expect(component.modulesToDisplay.length).toBeGreaterThan(0);
  });
...

我希望这个测试能够通过，因为我认为调用 'component.getModules();'在我的测试中将使用模拟数据。但它没有，modulesToDisplay 仍然是我在组件中初始化的空数组。所以我想我还是没有理解 mocking 数据的正确原理。

Answer 1

即使of 应该发出你的模拟值，我怀疑你可能仍然需要在异步上下文中执行它。如果您将规范更改为：

it('should assign result to modulesToDisplay', fakeAsync(() => {
  component.getModules();
  flushMicrotasks();
  fixture.detectChanges();
  expect(component.modulesToDisplay.length).toBeGreaterThan(0);
}));

通常当我的模拟似乎没有被使用时，它与我提供给配置的模拟对象与提供给 TestBed.configureTestingModule 的对象不匹配有关。

我尝试了两种方法来解决这个问题。

1.) 不要使用useValue 构建提供程序，而是像这样切换到useFactory：

...
providers: [{ provide: ConfigService, useFactory: () => configServiceMock }]

2.) 另一种方法是在服务配置完成后获取服务进行测试：

const csMock = jasmine.createSpyObject('ConfigureService', [...]);

TestBed.configureTestingModule(
...
providers: [{ provide: ConfigureService, useValue: csMock }]
);
configServiceMock = TestBed.get(ConfigureService);

Answer 2

Mocking 非常直接。让我帮你：

beforeEach(async(() => {
  ...

  providers: [
        { ConfigService, useClass: MockConfigService}
      ]
    }).compileComponents();

  beforeEach(() => {
    fixture = TestBed.createComponent(SomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should assign result to modulesToDisplay', () => {
    component.getModules();
    expect(component.modulesToDisplay.length).toBeGreaterThan(0);
  });

模拟课

export class MockConfigService{
   getModulesToDisplay(){
     return of({
         // whatever module object structure is
     })
   }
}

这就像一个魅力。我强烈推荐你this article which has a real world example to test a component。对于基础知识，this article would be helpful