javascript - Enzyme 模拟输入变化不起作用

我有一个React 输入组件，像这样。

const Input: InputComponent = props => {
  const { limit, suffix, className, onChange } = props;
  const [inputLength, setInputLength] = useState(0);
  const inputRef = useRef<HTMLInputElement>();

  const handleChange = (val: string, e: any): void => {
    setInputLength(val.length);
    onChange?.(val, e);
  };

  useEffect(() => {
    limit && setInputLength((inputRef?.current as any)?.state?.value?.length || 0);
  }, []);

  const { prefixCls: common } = useConfigContext();
  const prefixCls = `${common}-input`;

  return (
    <Component
      {...props}
      className={cx(className, prefixCls)}
      onChange={handleChange}
      ref={inputRef as any}
      suffix={
        limit ? (
          <div className={cx(`${prefixCls}__limit`)}>
            {inputLength}/{limit}
          </div>
        ) : (
          suffix
        )
      }
    />
  );
};

在我的 Input.spec.tsx 中

  it('onChange listener correctly', () => {
    const onChange = jest.fn();
    const component = mount(<Input onChange={onChange} defaultValue={'default'} />);
    const input = component.find('input');
    input.simulate('change', {
      target: {
        value: 'test',
      },
    });
    console.log(input.props()); // input value still show `default`
    expect(onChange.mock.calls.length).toBe(1);
  });

输入值仍然显示默认值（'default'），没有更改为 'test'。然而，onChange 事件被调用了。

有人能指导我我哪里出错了吗？

答案＃1

尝试下面的方法（只是一个假设）

 it('onChange listener correctly', () => {
    const onChange = jest.fn();
    const component = mount(<Input onChange={onChange} defaultValue={'default'} />);
    const input = component.find('input');
    input.simulate('change', {
      target: {
        value: 'test',
      },
    });
    component.update();
    console.log(input.props()); // input value still show `default`
    expect(onChange.mock.calls.length).toBe(1);
  });

update() - https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/update.html