javascript - Enzyme simulerar ändring på input fungerar inte

Jag har en React Input-komponent som denna.

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
        )
      }
    />
  );
};

i min 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);
  });

Inmatningsvärdet visar fortfarande standardvärdet ('default'), ändras inte till 'test'. Däremot anropas onChange-händelsen.

Kan någon ge mig lite vägledning om var jag gjorde fel?

Svar #1

Testa nedanstående tillvägagångssätt (bara en antagande)

 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