如何用Jest+Enzyme测试Textarea组件的onChange事件是否正确触发？

先帮你梳理下现有代码里的几个关键问题，然后给出完整的测试实现：

首先，先修正你的组件代码（关键遗漏点） #

你的原始组件只在handlechange里打印了值，但没有把事件传递给父组件传入的onChange回调，这会导致测试里的mock函数永远不会被触发。需要补充这一步：

import React from 'react';

class TextArea extends React.Component {
  // 建议用驼峰式命名：handleChange（符合React规范）
  handleChange = (e) => {
    console.log(e.currentTarget.value);
    // 必须把事件传递给父组件的onChange回调
    this.props.onChange(e);
  };

  render() {
    return (
      <textarea onChange={this.handleChange} value="initial value" />
    );
  }
}

export default TextArea;

然后完善你的测试用例 #

你的测试代码有两个小问题：props里的OnChange是大写O（应该和组件保持一致用onChange），以及模拟事件时缺少必要的事件对象参数。以下是完整的测试代码：

import React from 'react';
import { mount } from 'enzyme';
import TextArea from './TextArea';

describe('TextArea Component', () => {
  // 修正props名称：用小写onChange，和组件接收的props匹配
  const TEST_PROPS = { onChange: jest.fn() };

  it("fires onChange correctly when text input changes", () => {
    const textAreaWrapper = mount(<TextArea {...TEST_PROPS} />);
    jest.resetAllMocks();

    // 定义测试用的输入值
    const testInputValue = "Hello, test!";
    // 模拟textarea的change事件，传递包含currentTarget的事件对象
    textAreaWrapper.find("textarea").simulate("change", {
      currentTarget: { value: testInputValue }
    });

    // 验证mock回调是否被触发了一次
    expect(TEST_PROPS.onChange).toHaveBeenCalledTimes(1);
    // 验证回调接收的事件对象包含正确的输入值
    expect(TEST_PROPS.onChange).toHaveBeenCalledWith(
      expect.objectContaining({
        currentTarget: { value: testInputValue }
      })
    );
  });
});

关键步骤解释 #

1. 修正props名称：组件接收的是onChange（小写开头），所以测试里的props必须保持一致，否则无法触发传入的回调。
2. 模拟完整的change事件：Enzyme的simulate方法需要你传递模拟的事件对象，这里我们构造了包含currentTarget.value的对象，和真实DOM事件的结构匹配，确保组件的handleChange能正确获取值。
3. 双重验证mock函数：
   • 用toHaveBeenCalledTimes(1)确认回调确实被触发了一次；
   • 用expect.objectContaining验证回调接收的事件参数符合预期，确保值传递正确。

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