[英]Angular Test Jest - TypeError: Cannot read property 'queryParams' of undefined
我在其他帖子中看到了同样的错误,但它们对我不起作用。
我有一个 Angular 组件,我需要从 url 中读取一个 queryParam,例如在http://localhost:4200/sample-page?page=3
/**
* Set page by url parameter
*/
export const setPaginationMarkByUrlParam = (activatedRoute): number => {
// Get page param from Url to set pagination page
const pageParam = activatedRoute.snapshot.queryParams;
return pageParam.page ? Number(pageParam.page) : 1;
};
这个 function 在另一个文件中,我将 activeRoute 作为参数,它来自我想要获取 queryParam 的组件的 ngOnInit。
ngOnInit() {
this.page = setPaginationMarkByUrlParam(this.activatedRoute);
}
此代码运行良好,但是当 Jenkins 管道运行 npx npx jest
测试时,我收到以下消息: TypeError: Cannot read property 'queryParams' of undefined
我的规格:
beforeEach(() => {
TestBed.configureTestingModule({
...,
providers: [
{
provide: ActivatedRoute,
useValue: {
data: {
subscribe: (fn: (value: Data) => void) =>
fn({
pagingParams: {
predicate: 'id',
reverse: false,
page: 0
}
})
}
}
}
]...
it('Should call load all on init', () => {
// GIVEN
const headers = new HttpHeaders().append('link', 'link;link');
spyOn(service, 'query').and.returnValue(
of(
new HttpResponse({
body: [new DataSource(123)],
headers
})
)
);
// WHEN
comp.ngOnInit();
// THEN
expect(service.query).toHaveBeenCalled();
expect(comp.dataSources[0]).toEqual(jasmine.objectContaining({ id: 123 }));
});
comp.ngOnInit();
function。
我没有任何类型的私有变量,作为参数的activeRoute,我尝试了公共和私有。
查看 StackOverflow 和 GitHub 问题我无法解决此问题。
非常感谢!
虽然您是 mocking data
,但您不是 ActivatedRoute 上的 mocking snapshot
。 您有三个选择来完成此操作:
首先,您应该考虑使用文档中描述的 ActivatedRouteStub。 这样就很容易了: activatedRoute.setParamMap({page: 3});
设置您要设置的任何查询参数。 此选项需要更多测试代码
下一个选项:这将使用 Observable 模拟 ActivatedRoute 上page
的 queryParameter:
provide: ActivatedRoute, useValue: {
snapshot: of(queryParams: { page: 3 }),
}
provide: ActivatedRoute, useValue: {
snapshot: { queryParams: { page: 3 } }
}
最后,您提供的代码没有为 ActivatedRoute 提供程序inject
调用,也没有显示测试组件的创建。 所以至少要确保你也这样做:
任何一个:
fixture = TestBed.createComponent(...);
或者:
activatedRoute = TestBed.inject(ActivatedRoute);
如果这些建议都不能解决您的问题,请放置一个最小的 StackBlitz 来演示问题,我们会让它工作。
通常,当您使用 Jest 使用ActivatedRoute
时配置/模拟不同RouteOptions
,您应该使用:
@ngneat/spectator/jest
的createRoutingFactory
RouteOptions
属性,例如(params、queryParams、parent 等)例如:
const createComponent = createRoutingFactory({
component: Component,
imports: [RouterTestingModule],
parent: {
snapshot: {
queryParamMap: convertToParamMap({
//...
}),
paramMap: convertToParamMap({
//...
})
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.