Svelte Testing Library 输入值变更后组件状态未更新如何解决？

我正在使用Svelte Testing Library测试一个组件。
该组件包含一个input标签，其值通过bind:绑定到一个状态变量，且该状态变量决定了标题的文本内容，因此修改input的输入值时，标题文本也会同步变更。
我使用Svelte Testing Library编写了单元测试，调用fireEvent修改input标签的值，但断言标题文本时发现内容未发生变化，看起来input值确实改变了，但Svelte组件的状态没有同步更新。
请问为什么会出现状态不更新、标题不变的情况？我需要额外做什么操作才能触发状态更新？

这个问题本质上是两个常见的测试操作误区导致的：

• 双向绑定依赖的事件未正确触发：Svelte的bind:value是靠监听input元素的input事件来同步DOM值到组件状态的，如果仅手动修改DOM的value属性，或者触发的事件类型不对，Svelte不会感知到值的变化，自然不会更新关联状态和视图。
• 断言时机早于状态更新：Svelte的响应式更新是异步微任务，就算正确触发了事件，同步执行的断言也会在状态更新前运行，拿到的还是旧的视图内容。

推荐两种可行的修改方案，优先选第一种：

方案1：使用@testing-library/user-event模拟输入（官方推荐） #

这个库的方法会完全模拟真实用户的输入行为，自动触发所有需要的交互事件，且本身是异步API，执行完成后Svelte的状态已经更新完毕，不需要额外等待。
示例代码：

import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import TestComponent from './TestComponent.svelte';

test('输入内容同步更新标题', async () => {
  render(TestComponent);
  const user = userEvent.setup();
  const input = screen.getByRole('textbox');
  // 输入目标内容，加await等待操作完成
  await user.type(input, '测试文本');
  // 直接断言即可，此时状态已经更新
  expect(screen.getByRole('heading', { name: '测试文本' })).toBeInTheDocument();
});

方案2：使用fireEvent配合异步等待 #

如果你要继续用fireEvent，需要确保触发正确的input事件，再搭配waitFor或者异步查询方法等待状态更新。
示例代码：

import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
import TestComponent from './TestComponent.svelte';

test('输入内容同步更新标题', async () => {
  render(TestComponent);
  const input = screen.getByRole('textbox');
  // 触发input事件并传入新值
  fireEvent.input(input, { target: { value: '测试文本' } });
  // 等待状态更新后再执行断言
  await waitFor(() => {
    expect(screen.getByRole('heading', { name: '测试文本' })).toBeInTheDocument();
  });
});

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