Javascript 使用mockedService进行角度测试不'；t返回模拟数据

显然，我仍然缺少一个重要的东西，那就是对mocking服务的理解，我非常乐意提供一些信息

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

modulesToDisplay: any[] = [];

...

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

我想测试当我从服务中得到一些东西时是否重新分配了modulesToDisplay。因此，在我的测试文件中，我创建了一个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

仍然是我在组件中初始化的空数组。所以我想我仍然不理解模拟数据的正确原理。

即使的

应该发出模拟值，我怀疑您可能仍然需要在异步上下文中执行此操作。如果将规格更改为：

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);

嘲弄是非常直截了当的。我来帮你：


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
     })
   }
}


这会很有效的。我强烈建议你去。对于基础知识，
无成功：（-modulesToDisplay仍然是空数组我添加了一个调用来检测对规范的更改，尽管我不知道它实际上会有什么帮助。你能确认在执行
it
时该服务被模拟吗？我经常用
console.log
.Hm检查这种情况。这似乎是模拟服务的问题。如果我更改我的specfile to:…}）.compileComponents（）；configService=TestBed.inject（configService）；configService.getModulesToDisplay=（）=>of（['test1'，'test2']）；…它可以工作-但如果将其更改为：spyOn（configService，'getModulesToDisplay'）。和.returnValue（of['test1'，'test2']），我仍然没有真正的区别；它是否如预期的那样工作？我猜您的mock实际上没有被使用。有时我发现将提供程序更改为使用`useFactory:（）=>configServiceMock有助于或使用configService=TestBed.get（configService）获取服务配置测试模块后，您将确保您使用的测试对象与提供给您的类的对象相同。HTHI更新了我的响应以反映这些想法。很难理解您缺少的配置，因此我只想告诉您修复麻烦规格的方法。还有一点：很抱歉我的问题延迟回答。我花了一些时间尝试所有这些不同的方法。你的答案很好！谢谢你的方法谢谢你的输入。在这一次，我接受了Nephiw的答案，因为他的工作解决了我设置中的问题