如何测试接收useState函数作为prop的React组件

安全阿岳

2026-9-25

基础问题修正

你当前写的onSetText: () => {() => {}} 是错误的，该函数执行后会返回另一个空函数，并未匹配组件要求的「接收text参数直接执行更新逻辑」的函数签名，首先需要修正这个基础写法。

方案1：仅需组件正常渲染，不需要验证回调行为

直接传入最简空函数即可，可按需匹配参数签名：

const baseProps = {
  text: "Name",
  // 带TS类型标注写法，不需要的话可以去掉参数类型
  onSetText: (text: string) => {}
};

方案2：需要验证回调的调用次数、传参是否正确

使用测试框架的Mock函数即可，以Jest为例：

test("Renders the InlineEdit 'View' span when state is false", () => {
  Enzyme.configure({ adapter: new Adapter() })
  // 创建mock函数
  const mockOnSetText = jest.fn();
  const baseProps = {
    text: "Name",
    onSetText: mockOnSetText
  };
  const wrapper = render(<InlineEdit  {...baseProps}/>);
  
  // 模拟触发组件的编辑保存操作后，可做如下断言
  // 验证是否被调用
  expect(mockOnSetText).toHaveBeenCalled();
  // 验证传参是否符合预期，比如修改后的文本是"新名称"
  expect(mockOnSetText).toHaveBeenCalledWith("新名称");
});

方案3：需要模拟真实父组件状态更新，测试重渲染逻辑

可以在测试代码中直接使用真实的useState，完全复现业务场景的调用逻辑：

import { useState } from 'react';

test("测试编辑后文本同步更新", () => {
  Enzyme.configure({ adapter: new Adapter() })
  const [measure, setMeasure] = useState<Measure>({ id: "", name: "初始名称" });
  const wrapper = render(<InlineEdit 
    text={measure.name}
    onSetText={(text) => setMeasure({ ...measure, name: text })}
  />);

  // 模拟触发编辑、保存操作
  // 后续可直接断言组件渲染的text是否和更新后的measure.name一致
});