我正在使用 React js 和Autocomplete来自@mui/material/Autocomplete. 在这里你可以看到它是如何工作的。https://codesandbox.io/s/silent-night-7id9z?file=/index.js。
我想用酶测试这个组件。我的测试如下所示：

import {mount} from "enzyme";
import AutocompleteComponent from "./Autocomplete";

describe('autocomplete', () => {
    test('should trigger on change', () => {
        const wrapper = mount(<AutocompleteComponent/>);
        const input = wrapper.find('input');

        input.simulate('change', 'John');
        expect(input.props('value')).toContain('John')
        console.log(input.debug())
    })
})

我的组件代码如下所示：

const WithMaterialUI = () => {
  const [data, setData] = React.useState([]);
  return (
    <Autocomplete
      freeSolo
      disablePortal
      id="combo-box-demo"
      name="test"
      options={["2", "3"]}
      onInputChange={(_, val) => {
        setData(val);
      }}
      onChange={(_, val) => {
        setData(val);
      }}
      value={data}
      sx={{ width: 300 }}
      renderInput={(params) => (
        <TextField name="test" {...params} label="Movie" />
      )}
    />
  );
};

运行这个测试我得到： Expected value: "John" Received object: {"aria-activedescendant": null, "aria-autocomplete": "list", "aria-controls": null, "aria-describedby": undefined, "aria-invalid": false, "autoCapitalize": "none", "autoComplete": "off", "autoFocus": false, "className": "MuiInputBase-input MuiInput-input MuiAutocomplete-input MuiAutocomplete-inputFocused MuiInputBase-inputAdornedEnd", "defaultValue": undefined, "disabled": false, "id": "combo-box-demo", "name": "test", "onAnimationStart": [Function handleAutoFill], "onBlur": [Function handleBlur], "onChange": [Function handleChange], "onFocus": [Function handleFocus], "onKeyDown": undefined, "onKeyUp": undefined, "onMouseDown": [Function handleInputMouseDown], "placeholder": undefined, "readOnly": undefined, "required": false, "rows": undefined, "spellCheck": "false", "type": "text", "value": "test"}。
如何测试输入中的值是否更改以及为什么我的测试失败？