React Testing Library如何测试输入框的className？

我来帮你一步步解决这些测试问题，先梳理下核心问题和对应的修复方案：

首先修复组件代码里的两个关键问题 #

1. 不要依赖window.event #

你的validateInput函数用了window.event来获取输入框的name和value，但这个属性是浏览器环境特有的，在测试环境中fireEvent触发的事件不会更新window.event，导致无法正确更新错误状态。改成直接接收事件参数：

// 修改TripForm.jsx中的validateInput方法
validateInput = (e) => {
  const { name, value } = e.target;
  
  // 合并更新data和tripErrors状态，避免多次setState
  this.setState(prevState => {
    const newData = { ...prevState.data, [name]: value };
    const newTripErrors = { ...prevState.tripErrors };
    
    switch (name) {
      case "title":
        newTripErrors.titleError = value.length > 0 ? "" : "required";
        break;
      // 其他输入框的case保持不变
    }
    
    return {
      data: newData,
      tripErrors: newTripErrors
    };
  });
};

然后在输入框的onChange里把事件传递给validateInput：

<Form.Control 
  className={tripErrors.titleError.length > 0 ? "error" : null} 
  name="title" 
  aria-label="title" 
  type="text" 
  onChange={(e) => { 
    this.props.handleChange(e); 
    this.validateInput(e); // 这里传入e
  }} 
/>

2. 明确组件的props依赖 #

你的组件在onChange里调用了this.props.handleChange，测试时必须传递这个props，否则会抛出函数不存在的错误。我们可以用Jest创建一个mock函数来满足这个依赖。

编写正确的测试用例 #

测试1：输入框为空时显示error类 #

test('title field gets error class when empty', () => {
  // 创建mock的handleChange函数
  const mockHandleChange = jest.fn();
  
  const { getByLabelText } = render(
    <BrowserRouter>
      <TripForm handleChange={mockHandleChange} />
    </BrowserRouter>
  );
  
  const titleInput = getByLabelText('title');
  
  // 触发空值输入的change事件
  fireEvent.change(titleInput, { target: { value: '' } });
  
  // 验证输入框是否有error类
  expect(titleInput).toHaveClass('error');
});

测试2：输入内容后移除error类 #

test('title field removes error class when filled with text', () => {
  const mockHandleChange = jest.fn();
  
  const { getByLabelText } = render(
    <BrowserRouter>
      <TripForm handleChange={mockHandleChange} />
    </BrowserRouter>
  );
  
  const titleInput = getByLabelText('title');
  
  // 先设置为空，确保出现error类
  fireEvent.change(titleInput, { target: { value: '' } });
  expect(titleInput).toHaveClass('error');
  
  // 输入内容
  fireEvent.change(titleInput, { target: { value: 'My Awesome Trip' } });
  
  // 验证error类已移除
  expect(titleInput).not.toHaveClass('error');
});

为什么之前的测试会失败？ #

1. window.event依赖问题：测试环境中无法通过window.event获取触发的事件，导致validateInput无法正确更新错误状态，输入框自然不会加上error类。
2. 缺少handleChange props：组件依赖这个props但测试时没传，直接抛出了函数不存在的错误。
3. toHaveClass(null)用法错误：toHaveClass方法需要传入具体的类名，不能传null。要检查类是否被移除，应该用not.toHaveClass('error')。

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