Angular单元测试报错：TypeError: Cannot read properties of null (reading 'name')

这个错误的核心是组件测试时，某个被访问name属性的对象为null，大概率是组件依赖的数据源未正确初始化，以下是具体排查和解决步骤：

• 检查组件输入属性
  如果PostDetailComponent通过@Input()接收post对象，测试时必须给这个输入赋值。比如在测试的beforeEach块中添加：

  component.post = { name: '测试帖子', id: 1 };
  fixture.detectChanges();
  

  未初始化输入的话，模板里{{post.name}}会因post为null触发报错。

• 模拟依赖服务的返回值
  如果组件通过服务（比如PostService）获取post数据，测试时要确保服务返回的不是null。用Jasmine创建模拟服务并设置返回值：

  // 创建服务模拟
  const postServiceSpy = jasmine.createSpyObj('PostService', ['getPost']);
  
  // 在TestBed配置中替换真实服务
  await TestBed.configureTestingModule({
    declarations: [PostDetailComponent],
    providers: [{ provide: PostService, useValue: postServiceSpy }]
  }).compileComponents();
  
  // 测试前设置服务返回模拟数据
  postServiceSpy.getPost.and.returnValue(of({ name: '测试帖子', id: 1 }));
  fixture.detectChanges();
  

• 修复模板中的直接访问
  可以给模板里的属性访问加上安全导航操作符?.，比如{{post?.name}}，这样即使post为null也不会抛出错误，但这只是兜底方案，测试时仍需保证数据源正确初始化，避免依赖这种方式掩盖测试逻辑问题。

• 确认生命周期钩子触发时机
  如果组件在ngOnInit中获取数据，要确保调用fixture.detectChanges()时，模拟数据已准备好。若涉及异步获取数据，需用async/await或fakeAsync处理异步逻辑。

内容的提问来源于stack exchange，提问作者Alberto Piazzini