Redux 表单 onSubmit 在测试中值为空对象答案

【问题标题】：Redux form onSubmit values empty object in testingRedux 表单 onSubmit 在测试中值为空对象
【发布时间】：2017-06-09 10:26:45
【问题描述】：

onSubmit 处理程序中的值始终是一个空对象。如何将一些值传递给它以便我可以测试追加？

测试：

const store = createStore(combineReducers({ form: formReducer }));

const setup = (newProps) => {
  const props = {
    ...newProps,
  };
  expect.spyOn(store, 'dispatch');

  const wrapper = mount(
    <Provider store={store}>
      <RegisterFormContainer {...props} />
    </Provider>,
  );

  return {
    wrapper,
    props,
  };
};

describe('RegisterFormContainer.integration', () => {
  let wrapper;

  it('should append form data', () => {
    ({ wrapper } = setup());

        const values = {
          userName: 'TestUser',
          password: 'TestPassword',
        };

        expect.spyOn(FormData.prototype, 'append');

        // Passing values as second argument DOESN'T work, it's just an empty object
        wrapper.find('form').simulate('submit', values);

        Object.keys(values).forEach((key) => {
          expect(FormData.prototype.append).toHaveBeenCalledWith(key, values[key]));
        });

        expect(store.dispatch).toHaveBeenCalledWith(submit());
    });
});

容器：

const mapDispatchToProps = dispatch => ({
  // values empty object
  onSubmit: (values) => {
    const formData = new FormData();

    Object.keys(values).forEach((key) => {
      formData.append(key, values[key]);
    });

    return dispatch(submit(formData));
  },
});

export default compose(
  connect(null, mapDispatchToProps),
  reduxForm({
    form: 'register',
    fields: ['__RequestVerificationToken'],
    validate: userValidation,
  }),
)(RegisterForm);

组件：

const Form = ({ error, handleSubmit }) => (
  <form onSubmit={handleSubmit} action="">
    <Field className={styles.input} name="username" component={FormInput} placeholder="Username" />

    <button type="submit">
      Register
    </button>
  </form>
);

【问题讨论】：

你能展示你用来测试submit是否被正确的表单值调用的实际expect子句吗？
@jakee 完成。我在我的 jsdom 中使用 formdata-polyfill 作为 FormData 否则它将是未定义的。

标签： javascript unit-testing reactjs redux-form

【解决方案1】：

这里的问题是您忽略了实际表单的工作方式。如果您尝试在表单上模拟 submit 事件，则需要在 redux 存储中存储实际的表单值，以便 redux-form 提取这些值并将它们传递给 onSubmit 处理程序。

根本问题是您不应该在单元测试中端到端测试redux-form 的功能。测试您的应用是否可以端到端工作应该在集成测试级别进行。

我在这种情况下的建议是

假设只要您正确使用redux-form，表单到商店的集成就可以工作。
编写测试以确保您传递给 redux-form 相关组件的函数和值正确且正常工作。
保持测试组件和容器的分离，这篇文章应该给你a nice overview on how to test connected components

所以彻底测试mapDispatchToProps 以确保它产生的功能符合您的预期。然后确保将正确的函数和道具传递到组件和容器中的正确位置。之后，您可以放心地假设，只要您正确使用 redux 和 redux-form，一切正常。

希望这会有所帮助！

【讨论】：

【解决方案2】：

simulate 接受第二个参数，即事件对象。

wrapper.find('form').simulate('submit', { target });

【讨论】：

没用。我正在使用 Redux 表单，它应该产生“值”参数。
您似乎使用包装器找到了表单元素。 “表单”是 redux-form 吗？
有趣 ... redux-form 包装了表单并提供了 handleSubmit 属性。由于某种原因，这些值没有出现。很可能与设置代码有关。