Jest测试React Login组件validateForm报不是函数错误如何解决

报错根因 #

• 你定义的validateForm函数是Login组件内部的局部函数，没有对外暴露，测试代码无法通过命名导入的方式拿到这个函数，因此触发「不是函数」的类型错误。
• 除此之外，你的validateForm函数设计和测试调用逻辑也存在问题：原函数没有定义入参，直接依赖组件内部的username、password状态变量，测试代码传参方式和断言逻辑也和原函数的返回值不匹配。

方案1：抽离独立校验函数（推荐） #

把和组件状态耦合的校验逻辑抽成独立的纯函数，既方便单测，也可以在其他地方复用：

第一步 调整Login组件代码 #

// Login.js 新增导出独立校验函数
export function validateForm(username, password) {
  return username.length > 0 && password.length > 0;
}

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  // 组件内使用时传入当前状态即可
  const isFormValid = validateForm(username, password);
  // 其他组件逻辑...
}
export default Login;

第二步 修正测试代码 #

import React from "react";
import Login, { validateForm } from "./Login";
import { render, screen } from "@testing-library/react";

describe("LoginUser", () => {
  test("validate username and password should be greater than 0", () => {
    // 合法输入校验
    expect(validateForm("name", "pass")).toBe(true);
    // 空用户名校验
    expect(validateForm("", "pass")).toBe(false);
    // 空密码校验
    expect(validateForm("name", "")).toBe(false);
  });
});

方案2：直接测试组件交互行为 #

如果你不想单独导出内部函数，可以直接模拟用户操作测试组件表现，更贴近实际使用场景：

test('form submit button should be enabled only when username and password are filled', () => {
  render(<Login />);
  const submitBtn = screen.getByRole('button', { name: /login/i });
  // 初始状态按钮禁用
  expect(submitBtn).toBeDisabled();
  // 输入用户名和密码
  screen.getByLabelText(/username/i).type('name');
  screen.getByLabelText(/password/i).type('pass');
  // 按钮变为可用
  expect(submitBtn).toBeEnabled();
})

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