如何在 redux 表单字段中测试 onChange 事件

Question

我想测试redux表单字段中的onChange方法，当onChange方法被调用时，它应该设置本地状态。这是我要测试的容器代码。

constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    };
    this.handleUserNameChange = this.handleUserNameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  handleUserNameChange(event) {
    this.setState({
      username: event.target.value
    });
  }

  handlePasswordChange(event) {
    this.setState({
      password: event.target.value
    });
  }

这是将触发 onChange 方法的登录组件

const LoginForm = ({username, password, handleLogin, handleUserNameChange, handlePasswordChange, user_error, loading, loading_color}) => {
      return (
      <form name="form" onSubmit={handleLogin}>
        <h1> Login Form </h1>
          <Field
            name="user_name"
            type="text"
            label="User Name"
            component={renderUserComponent}
            onChange={handleUserNameChange}
            value={username}
          /><br />
          <Field
            name="password"
            type="password"
            label="Password"
            component={renderUserComponent}
            onChange={handlePasswordChange}
            value={password}
          /><br />
          {renderSubmit({user_error, loading, handleLogin, loading_color})}
          <br />
      </form>
    );
}

现在我可以使用以下测试代码测试 onsubmit 函数，但不能使用 handleOnchange 方法。这是我当前的测试代码。

describe("LoginForm", () => {
  let state={
    username: '',
    password: ''
  }
  const defaultProps = {
      username: '',
      password: '',
      handleLogin: () => {},
      handleUserNameChange: (event) => {
        state.setState({
          username: event.target.value
        })
      },
      handlePasswordChange: (event) => {
        state.setState({
          password: event.target.value
        })
      }
  };
  const handleLogin = sinon.spy();
  const handleUserNameChange = sinon.spy();
  const handlePasswordChange = sinon.spy();
  let loginForm = mount(
       <MuiThemeProvider muiTheme={getMuiTheme()}>
         <Provider store={store}>
         <LoginForm {...defaultProps} handleLogin={handleLogin} handleUserNameChange={handleUserNameChange} handlePasswordChange={handlePasswordChange}/>
         </Provider>
       </MuiThemeProvider>
  );

  describe("when the redux form was submitted", () => {
    it("the handleLogin function would be called once", () => {
        const button = loginForm.find("FlatButton");
        button.simulate('submit');
        expect(handleLogin.called).toBe(true);
    });
  });

  describe("when the username was changed", () => {
    it("the handleUserNameChange function would be called once, and the state would be changed", () => {
        const username_field = loginForm.find("Field").first();
        username_field.simulate('keyDown', { keyCode: 40});
        username_field.simulate('change', { keyCode: 40});
        expect(handleUserNameChange.called).toBe(true);
    });
  });
});

那么如何正确触发onChange方法，以及如何评估状态值呢？