Angular单元测试出现‘Variable is used before being assigned’错误求解

错误原因 #

你遇到的Variable 'res' is used before being assigned是TypeScript严格类型检查的结果。虽然运行时调用req.flush()会同步触发Observable的subscribe回调为res赋值，但TypeScript的静态分析无法识别Angular测试工具的这个特殊逻辑——它只能看到res声明时没有初始值，且expect(res)的位置在回调之外，因此判定res可能未被赋值就使用。

示例代码能运行的可能原因 #

你提到的示例代码可以正常编译，大概率是以下情况之一：

• 示例未开启TypeScript严格模式（tsconfig.json中strict设为false），此时TypeScript不会强制检查未初始化的变量；
• 示例给res设置了初始值（比如let res: string = ''）；
• 示例把断言逻辑直接写在了subscribe的回调函数内部，TypeScript能明确识别此时res已经被赋值。

解决方案 #

推荐以下几种修改方式：

1. 给res设置初始值

直接为res赋予初始值，让TypeScript确定它始终有值：

it('Check API returns the webmaster',  () =>  {
  let res: string = ''; // 添加初始值
  component.getUserService().getWebmasterEmail().subscribe(
    data => res = data,
  )

  const req = httpController.expectOne({
    method: 'GET',
    url: `/api/getWebmasterEmail`,
  })

  req.flush("toto")
  expect(res).toEqual("toto")
})

2. 将断言放在subscribe回调内

把expect直接写在回调函数里，确保TypeScript能识别变量已被赋值：

it('Check API returns the webmaster',  () =>  {
  component.getUserService().getWebmasterEmail().subscribe(
    data => {
      // 直接在回调中断言
      expect(data).toEqual("toto");
    }
  )

  const req = httpController.expectOne({
    method: 'GET',
    url: `/api/getWebmasterEmail`,
  })

  req.flush("toto")
})

3. 使用RxJS的firstValueFrom转换为Promise（RxJS 7+）

这种方式让代码更接近同步写法，TypeScript能清晰识别变量赋值时机：

import { firstValueFrom } from 'rxjs';

// ...

it('Check API returns the webmaster', async () =>  {
  const email$ = component.getUserService().getWebmasterEmail();
  
  // 匹配请求
  const req = httpController.expectOne({
    method: 'GET',
    url: `/api/getWebmasterEmail`,
  });

  // 触发响应
  req.flush("toto");
  
  // 转换Observable为Promise并等待结果
  const res = await firstValueFrom(email$);
  expect(res).toEqual("toto");
})

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