React Testing Library测试异常：handleLogout中navigate未执行

核心问题 #

handleLogout是异步函数，fireEvent.click触发点击后不会等待内部API调用和后续逻辑完成，测试就直接执行断言，此时navigate('/login')尚未执行，导致断言失败。

修复步骤 #

• 等待异步操作完成：替换fireEvent.click为userEvent.click（需导入@testing-library/user-event），它会自动等待异步流程结束；或在点击后用waitFor包裹断言，等待mockedNavigate被调用。
• 校验API Mock路径：确保api.post('auth/logout')实际请求的完整路径，与测试中Mock的http://localhost:2001/backend_ihm/auth/logout完全一致，避免因路径不匹配导致API调用挂起，阻塞后续navigate执行。

修复后的测试代码示例 #

方案1：使用userEvent.click #

import userEvent from '@testing-library/user-event';

test('check logout', async () => {
    server.use(
        rest.post('http://localhost:2001/backend_ihm/auth/logout', (req, res, ctx) => {
            return res(ctx.status(200))
        }),
    )

    const { getByTestId } = render(
        <Router>
            <AuthProvider>
                <HeaderApp links={links} activeLink={{ route: 1 }} />
            </AuthProvider>
        </Router>
    );

    await screen.findByText('TESTE');
    const linkLogout = getByTestId('link-logout');
    const user = userEvent.setup();

    await user.click(linkLogout);

    expect(mockedNavigate).toHaveBeenCalledWith('/login');
});

方案2：使用waitFor #

import { waitFor } from '@testing-library/react';

test('check logout', async () => {
    server.use(
        rest.post('http://localhost:2001/backend_ihm/auth/logout', (req, res, ctx) => {
            return res(ctx.status(200))
        }),
    )

    const { getByTestId } = render(
        <Router>
            <AuthProvider>
                <HeaderApp links={links} activeLink={{ route: 1 }} />
            </AuthProvider>
        </Router>
    );

    await screen.findByText('TESTE');
    const linkLogout = getByTestId('link-logout');

    fireEvent.click(linkLogout);

    await waitFor(() => {
        expect(mockedNavigate).toHaveBeenCalledWith('/login');
    });
});

额外检查点 #

• 确认AuthProvider未拦截handleLogout执行，比如是否有未处理的状态更新阻塞后续逻辑。
• 检查api.post是否存在全局错误拦截，若API调用抛出异常（如路径不匹配导致404），会直接终止handleLogout，navigate将不会执行，可在测试中添加错误日志排查。

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