测试angular 2应用程序时如何在Router上正确使用SharedModules?

Sanju

我正在尝试使用routerLink对(角度2)组件进行单元测试routerLinkActive但是所有测试用例均失败,并显示以下错误消息。注意:我已经对路由器和其他相关的依赖项进行了存根。这是我用于相同参考。)

无法读取未定义的属性“订阅”

我也注意到,当routerLinkrouterLinkActive从我的模板被删除,所有测试用例将没有任何错误运行。

我认为该错误是由RouterTestingModuleSharedModule(包含用于显示和验证密码输入字段的组件)引起的因此,我尝试删除或添加它们以查找实际上引起问题的原因。这是我观察到的。

  • 我得到'Cannot read property 'subscribe' of undefined'如果RouterTestingModuleSharedModule存在。
  • 仅当我同时删除了RouterTestingModule时,我才不会收到与路由器相关的任何错误SharedModules但是中的元素SharedModules不会加载到组件中,因此某些测试用例仍然会失败。

TestBed配置:

TestBed.configureTestingModule({

            imports: [CoreModule,SharedModule,RouterTestingModule],
            declarations: [ MyComponent,RouterLinkStubDirective,RouterOutletStubComponent ],
            providers: [
                FormBuilder,
                { provide: Router, useClass: RouterStub },
                { provide: ActivatedRoute, userClass: ActivatedRouteStub}
            ],
            schemas: [NO_ERRORS_SCHEMA]
        })
            .overrideComponent(MyComponent, {
                set: {
                    providers: [
                        {provide: AuthModel, useClass: MockAuthModel}    
                    ],
                }
            })
            .compileComponents();
    }));

ActivatedRouterStub:

@Injectable()
export class ActivatedRouteStub {

    // ActivatedRoute.params is Observable
    private subject = new BehaviorSubject(this.testParams);
    params = this.subject.asObservable();

    // Test parameters
    private _testParams: {};
    get testParams() { return this._testParams; }
    set testParams(params: {}) {
        this._testParams = params;
        this.subject.next(params);
    }

    // ActivatedRoute.snapshot.params
    get snapshot() {
        return { params: this.testParams };
    }
}

我应该进行哪些更改以解决该问题?

Sanju

我设法解决了这个问题。我将列出为解决该问题而进行的更改。

  1. 正如我在评论中提到的,routerLink仅在真实路由器上有效。因此,我们需要包括RouterTestingModule .withRoutes([{path: 'some/path',component: someComponent}])如果您打算在测试时单击它,则包括在内)。

  2. 我们不需要单独提供路由器的依赖,如果我们已经添加RouterTestingModule了。所以我删除了这两个RouterActivatedRoute依赖,我提供的。现在,错误从Cannot read property 'subscribe' of undefined变为Cannot read property 'outlets' of null

  3. 发现routerLink 指向空变量时会发生此错误在我的情况下,由于隔离的测试环境favoriteUrl,我分配给的属性称为routerLinknull。因此,我为函数中的属性手动分配了一个值,这beforeEach至少可以解决我的问题。

感谢所有尝试提供帮助的人!:-)

参考文献:

https://stackoverflow.com/a/45916133/8558515

https://stackoverflow.com/a/42039920/8558515

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

测试恶意应用程序时如何使用路由名称?

如何在Angular2 Web应用程序中正确使用ngFor?

测试Angular 2应用程序时出现“ CUSTOM_ELEMENTS_SCHEMA”错误

如何在PHP应用程序中使用Angular 2?

Angular 应用程序中的集成测试

Angular如何测试@HostListener

如何正确使用 Postman 测试应用程序?

NativeScript Angular2应用程序中的测试组件

测试Angular 2应用失败

如何正确测试Web应用程序?

如何导入共享模块(使用 Angular Material)来测试 Angular 应用程序?

使用XCTest测试iOS应用程序时,检查XCUIElement在屏幕上的位置

使用Cloud SDK测试Flask Web应用程序时出错 本地系统上的Google Cloud

测试 Angular 1.5 组件:如何测试 $onChanges

如何在Windows 10移动电话上测试Ionic 2应用程序?

如何在 MacOS 上使用 Jenkins 的 appium 测试 iOS 应用程序

测试烧瓶应用程序时如何模拟 AWS 资源

测试kivy编写的应用程序时如何与UI交互?

如何在 Angular 6 中测试应用程序/根组件

如何在不运行整个应用程序的情况下设计/测试Angular组件?

如何在元素上应用Angular指令测试

如何在PHP应用程序中正确包含Angular应用程序

测试FastAPI应用程序时如何触发使用寿命的启动和关闭?

创建新的Rails应用程序时,如何告诉Rails使用RSpec而不是测试单元?

如何检测angular2 Web应用程序处于测试模式

如何在Angular 2中测试* ngFor?

如何使用 Java 后端正确部署 Angular 2 应用程序?

Angular2 测试 Html

测试Angular 2父路线