React Testing：Jest登录成功后页面未刷新、列表不显示问题

不需要手动执行rerender操作，React Testing Library的render会自动监听组件状态变化并更新DOM。你的问题大概率出在异步操作未等待完成或测试逻辑时机不对，以下是具体排查和修复方案：

核心问题分析 #

点击OK按钮后，登录流程通常包含异步请求（比如验证Access Code、获取列表数据），await user.click(btnOk)仅等待点击事件完成，不会等待后续的异步请求处理和页面状态更新。此时调用screen.debug()，页面还没完成状态切换，所以仍显示登录界面。

修复步骤 #

1. 等待异步操作完成，确保页面状态更新 #

使用waitFor或findBy*查询方法（findBy*是getBy* + waitFor的组合），等待列表元素出现或登录相关元素消失，保证测试在页面状态更新后再执行断言或调试。

2. 替换fireEvent为userEvent的输入方法 #

userEvent.type更贴近真实用户输入行为，会触发完整的输入事件流，避免因事件触发不完整导致的状态更新问题。

修改后的测试代码示例 #

describe("<App />", () => {
    let server: any = null;
    beforeEach(() => {
        server = makeServer({ environment : "test" });
    });
     
    afterEach(() => {
        server.shutdown()
    });

    test("Login", async () => {
        render(<App />);

        const btnLogin = screen.getByText(/Login/i) as HTMLButtonElement;
        expect(btnLogin.disabled).toBe(false);
        
        const user = userEvent.setup();
        await user.click(btnLogin);
        
        let btnOk = screen.getByText(/OK/i) as HTMLButtonElement;
        expect(btnOk.disabled).toBe(true);

        let btnCancel = screen.getByText(/Cancel/i) as HTMLButtonElement;
        expect(btnCancel.disabled).toBe(false);

        const txt = screen.getByLabelText(/Access Code/i) as HTMLInputElement;
        // 用userEvent.type模拟真实输入
        await user.type(txt, 'USER');

        await user.click(btnOk);

        // 等待登录按钮消失，确认登录流程完成
        await waitFor(() => {
            expect(screen.queryByText(/Login/i)).not.toBeInTheDocument();
        });

        // 等待列表元素出现（根据实际组件调整查询方式，比如用role、text等）
        const dataList = await screen.findByRole('list');
        expect(dataList).toBeInTheDocument();

        screen.debug();
    });
});

额外排查点 #

• 服务器模拟是否正确：检查makeServer是否正确配置了登录接口的响应，确保返回成功状态和列表数据，前端能接收到并触发状态更新。
• 前端状态逻辑：确认登录成功后，前端是否正确切换路由、更新登录状态（比如设置isLoggedIn为true），从而触发列表组件的渲染。

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