使用 Jest 和 Enzyme 测试 React 表单输入值变化

Question

我从事这个测试已经有一段时间了，虽然我可以在网上找到几个解决方案，但我找不到任何适合我的解决方案。onChange我想检查使用该函数时输入字段中显示的文本是否正在更新。我不想直接测试状态。

我有一个具有以下状态和更改处理功能的表单：

const [formState, setFormState] = useState({
    createFirstName: '',
    createLastName: '',
    createEmail: '',
    createJobTitle: '',
    createWorkPhone: '',
    createCellPhone: '',
    createExtension: '',
  });

  const handleChange = event => {
    const value = event.target.value;
    setFormState({
      ...formState,
      [event.target.name]: value
    });
  };

到目前为止相当标准。我还有一个带有以下输入字段的表单：

<input
   name="createFirstName"
   id="assign-role-form-first-name-input"
   onChange={handleChange}
   type="text"
   ref={register({ required: true })}
   defaultValue={""}
            />

现在我应该提到我正在使用react-hook-form它有助于表单验证，尽管我不认为这会导致问题。

我正在尝试编写一个触发输入值更改的测试。我尝试过许多不同的组合，例如：

it('Should capture firstname correctly onChange', () => {
    const wrapper = mount(<AssignRoleForm />);
    const input = wrapper.find('#assign-role-form-first-name-input')
    input.simulate('change', {target: {value: 'Goose'}});
    expect(input.props()).toEqual('Goose')
})

或者

it('Should capture firstname correctly onChange', () => {
    const wrapper = mount(<AssignRoleForm />);
    const input = wrapper.find('#assign-role-form-first-name-input')
    input.simulate('change', {target: {name: 'createFirstName' value: 'Goose'}});
    expect(input.prop('value')).toEqual('Goose')
})

我也尝试过使用设置道具

input.prop('onChange')({target: {value: 'Goose'}})

我尝试过使用act(() => {}上述方法以及其他组合。我还尝试摆脱defaultValue输入字段并使用value它，但这也不起作用。我不确定我的问题是否在于更新输入，或者是否在于我调用输入的方式。