React登录组件handleSubmit单元测试调用次数为0问题求助

核心错误原因 #

• Login组件未定义handleSubmit接收属性，测试中传入的mock方法不会被组件使用，内部调用的是组件自身声明的handleSubmit函数
• 未填写合法表单值直接提交，getToken返回null导致后续逻辑中断
• 未给组件依赖的AuthContext提供测试用的Provider，上下文调用会异常
• submit事件绑定在form元素上，对button触发submit事件不符合事件触发规则

修复步骤 #

1. 前置mock配置 #

首先mock所有外部依赖：getToken服务方法、AuthContext、window.location.href

// 假设getToken从@/service/login导入，替换为你实际的导入路径
jest.mock('@/service/login', () => ({
  getToken: jest.fn(() => 'abccss') //  mock默认返回合法token
}))

// mock window.location避免跳转报错
const originalLocation = window.location
beforeAll(() => {
  delete window.location
  window.location = new URL('http://localhost')
})
afterAll(() => {
  window.location = originalLocation
})

注意：测试文件中需要导入你项目中实际定义的AuthContext实例

2. 修正后的测试用例 #

test('Submit should work successfully', () => {
  // 构造mock的context login方法
  const mockContextLogin = jest.fn()
  // 渲染组件时包裹AuthContext.Provider传入mock值
  const { getByPlaceholderText, getByRole } = render(
    <AuthContext.Provider value={{ login: mockContextLogin }}>
      <Login />
    </AuthContext.Provider>
  )

  // 先给表单填入合法账号密码
  fireEvent.change(getByPlaceholderText('Email Address'), {
    target: { value: 'test@test.com' }
  })
  fireEvent.change(getByPlaceholderText('Password'), {
    target: { value: '123' }
  })

  // 触发表单提交
  const loginForm = getByRole('form')
  fireEvent.submit(loginForm)

  // 断言逻辑：验证getToken被正确调用
  expect(getToken).toHaveBeenCalledTimes(1)
  expect(getToken).toHaveBeenCalledWith({
    username: 'test@test.com',
    password: '123'
  })
  // 验证context的login方法被调用
  expect(mockContextLogin).toHaveBeenCalledTimes(1)
  expect(mockContextLogin).toHaveBeenCalledWith('abccss')
  // 验证跳转逻辑生效
  expect(window.location.href).toBe('http://localhost/dashboard')
})

可选校验场景 #

如果需要测试账号密码错误的分支，可单独用例覆盖，临时修改getToken的mock返回值为null即可：

test('Submit should fail with wrong credentials', () => {
  getToken.mockReturnValueOnce(null)
  // 其余逻辑参考上面的用例，填入错误账号密码提交，断言mockContextLogin未被调用即可
})

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