使用Jest的角度单元测试订阅方法

Question

我刚开始用angular和jest进行单元测试，我正在尝试测试这种方法：

doSearch(pageSize?:number) {
this.isLoading = true;
const formClone = this.form?.getRawValue();
this.splitStringToGetOnlyTheId(formClone);
this.onCheckEmptyFieldsAndReplaceNull(formClone);

this._userService?.getUsers(formClone, pageSize)
.subscribe(response => {
this.dataSource = response.content;
this.agGrid?.api.setRowData(this.dataSource);
this.isLoading = false;
this.isShowingTable = true;
}
}

所以我试着使用了jest-spyOn方法，但没有成功：请参阅以下代码：

describe('UserComponent', () => {
let component: UserComponent;
let fixture: ComponentFixture<UserComponent>
let mockUserService: UserService;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ UserComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{ provide: UserService, useValue: mockUserService },
],
imports: [
HttpClientTestingModule,
ReactiveFormsModule,
RouterTestingModule,
MatDialogModule,
BrowserAnimationsModule
]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(UserComponent);
component = fixture.componentInstance;
mockUserService = TestBed.inject(UserService);
});
it('should return some value after doSearch', () => {
const mockresponse = {
content: [{
businessUnitId: '0800',
firstName: 'teste',
lastName: 'lastteste',
mail: '[e-mail]',
isActive: true,
}],
}
const spysplit = jest.spyOn(component, 'splitStringToGetOnlyTheId');
const spycheck = jest.spyOn(component, 'onCheckEmptyFieldsAndReplaceNull');
const spyService = jest.spyOn(mockUserService, 'getUsers').mockReturnValue(of(mockresponse));
component.doSearch();
expect(spysplit).toHaveBeenCalled();
expect(spycheck).toHaveBeenCalled();
expect(spyService).toHaveBeenCalled();
});

但我得到了错误：

不能对基元值执行spyOn；未定义的给定

我不明白，我已经在监视这个方法了。

Answer 1

首先，从单元测试的角度，监视这两种方法

this.splitStringToGetOnlyTheId(formClone);
this.onCheckEmptyFieldsAndReplaceNull(formClone);

没有意义，因为它们无论如何都会被调用，可能你需要检查consecuence(如果有的话(。

按照这种方法，您不需要断言服务调用，测试应该期望

this.dataSource

充满了模拟数据，类似于：

expect(component.dataSource).toBe(mockresponse.content);

编辑1

有了这样的期望，并删除剩余的间谍，测试应该会通过：

it('should return some value after doSearch', () => {
const mockresponse = {
content: [{
businessUnitId: '0800',
firstName: 'teste',
lastName: 'lastteste',
mail: '[e-mail]',
isActive: true,
}],
}
jest.spyOn(mockUserService, 'getUsers').mockReturnValue(of(mockresponse));
component.doSearch();
expect(component.dataSource).toBe(mockresponse.content);
});

编辑2

此外，在您的测试配置中，您使用未定义的变量提供UserService，这可能是错误的原因，要解决它，您有两个选项：

1. 如果服务是在root中提供的，则不需要在测试中提供。

2. 如果它没有在root中提供，您将需要创建一个服务实例并提供它：

   let mockUserService:UserService=新的UserService(args…(；