ReduxフォームonSubmit値テスト中の空のオブジェクト

Question

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

Answer 1

ここでの問題は、実際のフォームの仕組みを見落としていることです。フォーム上でsubmitイベントをシミュレートしようとすると、redux-formがそれらの値を抽出してonSubmitハンドラに渡すためには、reduxストアに実際のフォーム値が格納されている必要があります。

基本的な問題は、ユニットテスト内でredux-formエンドツーエンドの機能をテストしないでください。アプリがエンドツーエンドで動作するかどうかのテストは、統合テストレベルで実行する必要があります。このような状況で

私の提案は

1. は、限り、あなたは、正しくredux-formを使用しているとして、フォーム・ツー・店舗統合が動作することを想定しています。
2. redux-form関連のコンポーネントに渡す関数と値が正しく、正しく動作することを確認するテストを作成します。
3. テストコンポーネントとコンテナ間の分離を維持し、この記事では、あなたが期待するようにそれが生成する機能が動作することを確認するためにあなたに徹底的にa nice overview on how to test connected components

だから、テストmapDispatchToPropsを与える必要があります。次に、適切な関数と小道具をコンポーネントやコンテナ内の適切な場所に渡していることを確認します。その後、あなたはreduxとredux形式の権利を使用している限り、すべてが動作することを安全に仮定することができます。

希望すると便利です。

Answer 2

simulateイベントオブジェクトである第二のパラメータを受け付けます。

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