React Testing Library：fireEvent.click传递step对象为空的解决方法

问题背景 #

我有一个单选按钮，点击时调用changeMedia函数，该函数接收value和step两个参数。使用Testing Library模拟点击后，value能正确获取到，但step始终是空对象{}，无法拿到完整的step数据。

相关代码 #

单选按钮代码 #

<Form.Check
  inline
  label={'form.email'}
  name="media"
  value={`LETTER`}
  type="radio"
  data-testid="EMAIL"
  onClick={(e) => {
    const target = e.target as HTMLTextAreaElement;
    changeMedia(target.value, data);
  }}
/>

changeMedia函数 #

const changeMedia = (value: any, step: any) => {
  step.definition?.steps
    .filter((obj: any) => obj.media.includes(value))
    .map((item: any) => {
      if (value === 'EMAIL') {
        item.media = 'LETTER';
        return item;
      } else if (value === 'LETTER') {
        item.media = 'EMAIL';
        return item;
      }
      return item;
    });
  return data;
};

目标step对象 #

const step = {
  definition: {
    steps: [
      {
        document_model: 'template_circularization',
        email_model: 'email_circularization',
        label: {
          EN: 'Circularization',
          FR: 'Circularisation',
        },
        media: 'LETTER',
        name: 'mail_circularization',
        onDemandOnly: true,
      },
    ],
  },
};

当前测试代码 #

const radio = screen.getByTestId('EMAIL');
fireEvent.click(radio, { target: { value: 'EMAIL, step: step } });

问题原因 #

1. 测试代码存在语法错误：value: 'EMAIL缺少闭合引号，且错误地将step放在target对象内。
2. 核心逻辑错误：按钮的onClick回调中，changeMedia的第二个参数是组件内部的data变量，而非从事件对象中获取。因此在fireEvent.click中传递step到事件对象里完全无效，回调根本不会读取这个值。

解决方案 #

步骤1：修正测试代码语法错误 #

首先把测试代码里的语法问题修复：

fireEvent.click(radio, { target: { value: 'EMAIL' } });

步骤2：确保组件能获取到完整的step对象 #

• 如果data是组件的props：渲染组件时直接传入定义好的step对象

// 渲染组件时传入完整的step作为data props
render(<YourComponent data={step} />);

const radio = screen.getByTestId('EMAIL');
fireEvent.click(radio, { target: { value: 'EMAIL' } });

此时组件的onClick回调会使用传入的data（即完整的step对象）作为changeMedia的第二个参数。

• 如果data是组件内部变量：确保测试环境中该变量被初始化为目标step对象，或者重构组件将data改为props传入（更推荐，便于测试）。

额外注意点 #

检查单选按钮的value属性：当前按钮value设为LETTER，但测试时模拟点击传递的是EMAIL，这可能与业务逻辑不符。如果该按钮代表的是EMAIL选项，建议将按钮的value改为EMAIL，避免逻辑混淆。

内容的提问来源于stack exchange，提问作者Greg-A