javascript - 角度单元测试。TypeError:无法读取 null 的属性“id”。[茉莉,业力]
问题描述
我正在为我的 Angular 应用程序编写组件单元测试。我currentUser
在组件和 html 模板中使用了一个变量。在每次测试中都会对其进行模拟(通过component.currentUser = {...}硬编码)。无论如何,业力失败了。将不胜感激任何帮助。
UserProfileComponent > should create
TypeError: Cannot read property 'id' of null
at UserProfileComponent.ngOnInit (http://localhost:9877/_karma_webpack_/webpack:/src/app/modules/user-profile/page/user-profile/user-profile.component.ts:4:21)
at callHook (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2573:1)
at callHooks (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2542:1)
at executeInitAndCheckHooks (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2493:1)
at refreshView (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9481:1)
at renderComponentOrTemplate (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9580:1)
at tickRootContext (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10811:1)
at detectChangesInRootView (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10836:1)
at RootViewRef.detectChanges (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:22815:1)
at ComponentFixture._tick (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:141:1)
下面的代码示例。
用户配置文件.component.ts
ngOnInit(): void {
this.currentUser = this.userService.getUser();
console.log(this.currentUser.id);
this.userAnnouncements();
}
用户配置文件.component.spec.ts
describe('UserProfileComponent', () => {
let component: UserProfileComponent;
let fixture: ComponentFixture<UserProfileComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HttpClientTestingModule, RouterTestingModule],
declarations: [UserProfileComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(UserProfileComponent);
component = fixture.componentInstance;
component.currentUser = {
id: 1,
email: 'admin@admin.com',
firstname: 'admin',
img_name: 'photo',
lastname: 'admin',
location: 1,
password: 'hashed_pass',
role: 'admin',
username: 'admin',
};
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
解决方案
问题是您没有模拟 的数据userService
,因此它会覆盖您设置的值。
您应该模拟如下服务:
describe('UserProfileComponent', () => {
let component: UserProfileComponent;
let fixture: ComponentFixture<UserProfileComponent>;
let userService: jasmine.SpyObj<UserService>;
beforeEach(async () => {
const userServiceSpy = jasmine.createSpyObj('UserService', ['getUser']);
await TestBed.configureTestingModule({
imports: [HttpClientTestingModule, RouterTestingModule],
declarations: [UserProfileComponent],
providers: [ {provide: UserService, useValue: userServiceSpy }],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).compileComponents();
});
beforeEach(() => {
userService = TestBed.inject(UserService) as jasmine.SpyObj<UserService>;
userService.getUser.and.returnValue({
id: 1,
email: 'admin@admin.com',
firstname: 'admin',
img_name: 'photo',
lastname: 'admin',
location: 1,
password: 'hashed_pass',
role: 'admin',
username: 'admin',
});
fixture = TestBed.createComponent(UserProfileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
expect(component.currentUser.id).toBe(1)
});
});
我建议您阅读文章集以了解如何使用明确定义的实践进行单元测试
推荐阅读
- reactjs - 在功能组件中使用道具
- bash - Shell 脚本,带有变量的 curl 作为 url 的一部分
- vb.net - 组合框在 VB.net 中以 winform 显示两次
- sql - Postgresql 使用 CASE 根据其他数据的存在返回不同的数据
- php - OAUTH:Facebook API 因重定向 URL 参数错误而引发错误
- javascript - 如何编写一个Javascript函数来按顺序从字符串中获取所有回文子序列?
- node.js - AgoraIO Web + Heroku
- matlab - 从符号微分的结果创建函数句柄的问题
- c++ - 嵌入式 C++ - 虚拟析构函数和堆内存
- autodesk-forge - 如何从模型衍生 API 元数据创建模型浏览器,如对象