React Testing Library快照未显示Input的onChange属性求助

首先，你遇到的这个情况其实是正常现象，核心原因和对应的解决思路我给你拆解清楚：

1. 为什么快照里看不到onChange这类属性？ #

Jest快照本质是记录组件最终渲染出的DOM结构，而React的合成事件（比如onChange）并不是作为DOM元素的HTML属性存在的——它们是React内部绑定的事件处理器，不会被渲染到最终的HTML里。只有原生HTML支持的属性（比如type、placeholder）会直接出现在DOM元素上，所以能在快照中显示。

另外你提到的className，在快照里显示的c1是styled-components自动生成的类名，如果你希望自定义的className也被应用，需要确保你的Styled.input组件正确接收并合并外部className（styled-components默认会自动处理，但如果你的Styled组件有特殊封装逻辑，可能需要检查是否传递了该属性）。

2. 如何验证事件处理、props传递是否正确？ #

快照测试更适合验证UI结构的一致性，而验证事件绑定、props传递这类逻辑，应该用React Testing Library的交互测试或属性断言，具体可以这么做：

方案一：测试事件触发逻辑 #

直接模拟用户输入行为，验证onChange是否被正确调用：

it('triggers onChange when input value changes', () => {
  const mockOnChange = jest.fn();
  render(
    <ThemeProvider theme={theme}>
      <TextField placeholder="Random text" type="search" onChange={mockOnChange} />
    </ThemeProvider>,
  );

  // 获取输入框并触发change事件
  const input = screen.getByRole('textbox');
  fireEvent.change(input, { target: { value: 'test content' } });

  // 验证onChange的调用情况
  expect(mockOnChange).toHaveBeenCalledTimes(1);
  expect(mockOnChange).toHaveBeenCalledWith(expect.any(Object)); // 确认事件对象被传递
});

方案二：断言组件接收了正确的props #

如果只是想确认组件正确接收了onChange等props，可以直接断言DOM元素的属性：

it('receives all passed props correctly', () => {
  const mockOnChange = jest.fn();
  const customClass = 'custom-input-class';
  
  render(
    <ThemeProvider theme={theme}>
      <TextField 
        placeholder="Random text" 
        type="search" 
        onChange={mockOnChange}
        className={customClass}
      />
    </ThemeProvider>,
  );

  const input = screen.getByRole('textbox');
  // 验证onChange是一个函数（确认传递成功）
  expect(input).toHaveProperty('onChange', expect.any(Function));
  // 直接对比mock函数引用，确保是同一个函数
  expect(input.onChange).toBe(mockOnChange);
  // 验证自定义className是否被应用（会和styled-components生成的类名合并）
  expect(input).toHaveClass(customClass);
});

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