React单元测试act(async)未加await警告问题求助

你的问题并非Bug，是异步测试逻辑的处理方式有误导致的。以下是问题分析和正确写法：

问题根源 #

• 初始代码中调用了async act()但未添加await，触发第一个警告；
• user.type是异步方法（新版@testing-library/user-event的所有交互方法均为异步），未等待其完成就执行后续逻辑，导致组件状态更新与测试逻辑交织，引发act调用重叠的警告。

正确写法 #

写法一：手动用act包裹异步交互（推荐在需要明确控制更新时使用） #

it('correctly returns postcodes found', async () => {
    const { input, user, onPostcodeLookup } = setup();

    // 等待act内的异步交互完成
    await act(async () => {
        await user.type(input, 'NG1 6DQ');
    });

    // waitFor内部已自动封装act，无需嵌套
    await waitFor(() => {
        expect(onPostcodeLookup).toHaveBeenCalled();
        expect(onPostcodeLookup).toHaveBeenCalledWith([mockedData]);
    });
});

写法二：省略手动act（更简洁，推荐日常使用） #

新版@testing-library/user-event的交互方法内部已自动用act包裹状态更新，因此可以直接等待交互完成，无需手动调用act：

it('correctly returns postcodes found', async () => {
    const { input, user, onPostcodeLookup } = setup();

    await user.type(input, 'NG1 6DQ');

    await waitFor(() => {
        expect(onPostcodeLookup).toHaveBeenCalled();
        expect(onPostcodeLookup).toHaveBeenCalledWith([mockedData]);
    });
});

之前尝试方案的问题分析 #

• 移除act后出现更新未包裹警告：未等待user.type这个异步操作完成，组件更新发生在测试逻辑之外，因此需要await user.type(...)让测试等待状态更新完成。
• 移除act的async/await：act内部包含异步逻辑（await waitFor），必须使用async act()并添加await，否则会导致未完成的act调用与后续逻辑重叠。
• 仅用act包裹user.type但未await：async act()本身需要被await，同时user.type也是异步方法，必须等待其执行完成，否则组件状态更新未结束就进入waitFor，引发act重叠。

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