使用Jest测试React输入组件时状态更新失败，报setUsername错误

问题核心 #

测试子组件One时，使用userEvent输入文本无响应，报错TypeError: setUsername is not a function，本质是组件依赖的状态更新函数未正确传入或模拟。

解决思路1：单独测试子组件，手动传入Mock Props #

One是受控组件，所有状态和更新函数都依赖父组件传入的props，单独测试时需手动模拟必要的props，无需依赖父组件渲染。

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import One from './One';

describe("Step One", () => {
  it("Can input text and trigger state updates", async () => {
    // 模拟需要验证的状态更新函数
    const mockSetUsername = jest.fn();
    const mockSetEmail = jest.fn();
    
    // 渲染子组件，传入所有必填props，用jest.fn()填充无需验证的回调
    render(
      <One 
        username="" 
        setUsername={mockSetUsername} 
        steps={1}
        setSteps={jest.fn()}
        setSelectedCountry={jest.fn()}
        selectedCountry={null}
        setSelectedState={jest.fn()}
        selectedState={null}
        setSelectedCity={jest.fn()}
        selectedCity={null}
        email={null}
        setEmail={mockSetEmail}
        profilePic={null}
        setProfilePic={jest.fn()}
      />
    );

    const usernameInput = screen.getByTestId("username");
    const emailInput = screen.getByTestId("email");

    // userEvent.type是异步操作，必须加await
    await userEvent.type(usernameInput, "Emmanuel");
    await userEvent.type(emailInput, "emmanuelsibanda21@gmail.com");

    // 断言状态更新函数被正确调用
    expect(mockSetUsername).toHaveBeenCalledWith("Emmanuel");
    expect(mockSetEmail).toHaveBeenCalledWith("emmanuelsibanda21@gmail.com");

    // 若需验证输入框值，需重新渲染组件并传入更新后的props
    // render(<One username="Emmanuel" email="emmanuelsibanda21@gmail.com" {...其他props} />);
    // expect(usernameInput).toHaveValue("Emmanuel");
  });
});

解决思路2：测试完整父组件流程 #

如果要验证父组件与子组件的交互，需确保父组件Index的steps初始值为1，让One组件正常渲染，通过UI变化（如下一步按钮显示）验证输入有效性。

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Index from './Index';

describe("Step One Flow", () => {
  it("Enables next button after valid input", async () => {
    render(<Index />);

    // 确认输入框存在（即One组件已渲染）
    const usernameInput = screen.getByTestId("username");
    const emailInput = screen.getByTestId("email");

    await userEvent.type(usernameInput, "Emmanuel");
    await userEvent.type(emailInput, "emmanuelsibanda21@gmail.com");

    // 断言下一步按钮从隐藏变为显示
    const nextButton = screen.getByTestId("next");
    expect(nextButton).toBeInTheDocument();
  });
});

问题根源总结 #

1. 原代码中渲染的<index>组件名首字母未大写（React组件需大写开头），且未确保Index的steps初始值为1，导致One组件未被渲染。
2. 手动创建的component对象与测试组件无关联，mockSetState不会被组件调用，断言自然失败。
3. 报错setUsername is not a function是因为One组件未收到正确的setUsername props，要么是渲染时未传入，要么是父组件传递逻辑出错。

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