MSW无法识别Context内的handleLogin函数，请求拦截测试报错

核心原因是你的测试代码里没有用AuthProvider包裹LoginPage，组件通过useContext(AuthContext)拿不到上下文里的handleLogin，此时handleLogin是undefined，调用时自然会报“不是函数”的错误。

修复步骤 #

1. 在测试文件顶部导入你的AuthProvider
2. 修改renderLoginPage函数，把LoginPage嵌套在AuthProvider内部

修改后的测试代码如下：

import { render, screen, fireEvent } from '@testing-library/react';
import LoginPage from '..';
import { BrowserRouter } from 'react-router-dom';
import { userEvent } from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';
// 导入AuthProvider，替换成实际文件路径
import { AuthProvider } from '../path-to-your-auth-context-file'; 
 
const handlers = [
  http.post('http://127.0.0.1:8000/api/token/', () => {
    return new HttpResponse(null, { status: 401 })
  }),
]

const server = setupServer(...handlers);

function renderLoginPage() {
  return (
    render(
      <BrowserRouter>
        {/* 用AuthProvider包裹LoginPage */}
        <AuthProvider>
          <LoginPage />
        </AuthProvider>
      </BrowserRouter>
    )
  )
}

describe('<loginPage />', () => {
  beforeAll(() => server.listen());
  afterEach(() => server.resetHandlers());
  afterAll(() => server.close());

  it('should render error message if user not found', async () => {
    renderLoginPage();

    const usernameInput = screen.getByLabelText(/username/i);
    const passwordInput = screen.getByLabelText(/password/i);
    fireEvent.change(usernameInput, {target: {value: 'test'}});
    fireEvent.change(passwordInput, {target: {value: 'test'}});

    const button = await screen.findByText(/sign in/i);     

    await userEvent.click(button);
  
    await screen.findByText(/usuário ou senha inválidos/i);

  });
})

额外优化建议 #

你的handleLogin函数里手动new Promise是多余的——async函数本身就会返回Promise，直接简化代码更清晰：

const handleLogin = async function(event: FormEvent<HTMLFormElement>): Promise<AxiosResponse> {
  const url = 'http://127.0.0.1:8000/api/token/';

  const response = await axios.post(url, {
    username: event.currentTarget.username.value,
    password: event.currentTarget.password.value,
  });

  if (response.status !== 200) throw new Error('unauthorized');

  const tokenRefresh = JSON.stringify(response.data.refresh);
  const tokenAccess = JSON.stringify(response.data.access);

  localStorage.setItem('userTokens', tokenRefresh);
  setUserTokens(tokenRefresh);
  setIsAuthenticated(tokenAccess);

  return response;
}

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