Angular Academy · 课时

测试信号与异步代码

Q: 「测试信号与异步代码」这节课中我会学到什么？

测试响应式和异步行为 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

测试响应式和异步行为

第 4 / 4 课13 个步骤

测试信号与异步代码 是 CoddyKit 上的免费 Angular Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

异步是测试中最困难的部分

真实组件会执行异步操作：计时器、promise、HTTP 以及经过防抖处理的输入。测试必须控制时间，以便断言在异步操作完成后执行。Angular 提供了 fakeAsync、tick 和 flush，用于确定性地控制时间。

测试信号

信号的读取方式类似函数。测试它很直接：调用信号并断言其值；更新信号后再次断言。

it('increments the count signal', () => {
  const fixture = TestBed.createComponent(CounterComponent);
  const c = fixture.componentInstance;
  expect(c.count()).toBe(0);
  c.increment();
  expect(c.count()).toBe(1);
});

计算信号会自动更新

computed 会在其依赖发生变化时重新计算。在测试中，您只需更改源信号，然后读取计算信号；无需手动重新计算。

expect(c.doubled()).toBe(0);
c.count.set(5);
expect(c.doubled()).toBe(10); // computed(() => c.count() * 2)

信号与 DOM

要查看信号的变化是否反映到模板中，请在更新信号后调用 detectChanges()，这与处理其他状态一样。

c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');

引入 fakeAsync

将测试包装在 fakeAsync 中即可进入虚拟时间环境。计时器和微任务会排队等待，而不是立即运行，您可以手动推进它们。这样可以让异步测试表现得像同步测试一样，并且更加可靠。

import { fakeAsync, tick } from '@angular/core/testing';

it('loads after delay', fakeAsync(() => {
  // timers are now under your control
}));

使用 tick 推进时间

tick(ms) 会让虚拟时钟向前推进，并运行在这段时间内安排的所有计时器。

it('fires after 1s', fakeAsync(() => {
  let done = false;
  setTimeout(() => (done = true), 1000);
  expect(done).toBe(false);
  tick(1000);
  expect(done).toBe(true);
}));

使用 flush 处理所有待处理计时器

当您不知道确切的延迟时间时，flush() 会持续执行所有待处理的宏任务，直到队列清空。

import { fakeAsync, flush } from '@angular/core/testing';

it('completes debounced search', fakeAsync(() => {
  component.search('ang');
  flush(); // run all timers (e.g. debounceTime)
  expect(component.results().length).toBeGreaterThan(0);
}));

使用 fakeAsync 测试 Promise

Promise 会作为微任务完成。在 fakeAsync 中，请调用 flushMicrotasks()（或 tick()），让它们完成后再进行断言。

import { fakeAsync, flushMicrotasks } from '@angular/core/testing';

it('resolves promise', fakeAsync(() => {
  let v: number | undefined;
  Promise.resolve(42).then((n) => (v = n));
  flushMicrotasks();
  expect(v).toBe(42);
}));

async / waitForAsync 辅助工具

对于必须等待真实异步操作、但不需要控制时间的测试，请将主体包装在 waitForAsync 中，并使用 fixture.whenStable()。

import { waitForAsync } from '@angular/core/testing';

it('settles', waitForAsync(() => {
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(fixture.componentInstance.ready()).toBe(true);
  });
}));

测试 effect()

effect 会在它读取的信号发生变化后异步运行。要观察其结果，请运行变更检测（或执行 flush），使 effect 得以执行，然后断言副作用。

c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);

常见陷阱：遗留的计时器

如果 fakeAsync 测试结束时仍有计时器排队，Angular 会抛出错误。请始终使用 tick/flush 处理它们，或在 ngOnDestroy 中清除间隔计时器，确保测试结束时虚拟时钟为空。

快速检查

请为已知的延迟选择正确的工具。

在交互式课程中回答

回顾

信号的测试方式类似简单函数（调用以读取，使用 set 更新，使用 detectChanges 更新 DOM）。对于异步操作，fakeAsync 提供虚拟时钟，您可以使用 tick 推进时间、使用 flush 清空队列，并使用 flushMicrotasks 让 Promise 完成。绝不要留下待处理的计时器。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 38
课程: 144

免费开始学习查看完整课程

常见问题解答

「测试信号与异步代码」课时是免费的吗？

是的 — 「测试信号与异步代码」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「测试信号与异步代码」这节课中我会学到什么？

测试响应式和异步行为你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「测试信号与异步代码」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy