フォーム提出をテストするときにreduxフォームの酵素テストが失敗する

Question

私はreduxフォームを使用するSignUp Reactコンポーネントを持っています。そして、私のonSubmitは基本的に非同期アクションをディスパッチします。 EnzymeとJestを使用して私のコンポーネントをテストしようとしています。ディスパッチにスパイを追加し、フォームの送信をシミュレートしてディスパッチが呼び出されたかどうかをチェックします。しかし、私のテストは失敗します。ここで

は私のサインアップReduxのフォームコンポーネントである：ここで

import React from 'react'; 
import {reduxForm, Field, focus} from 'redux-form'; 
import Input from './input'; 
import {required, nonEmpty, email, isTrimmed, length} from '../validators'; 
import {registerUser} from '../actions/users'; 
import {login} from '../actions/auth'; 
export class SignUpForm extends React.Component { 
    onSubmit(values) { 
     const {username, password, fname, lname} = values; 
     const newUser = { 
      username, 
      password, 
      user: { 
       firstName: fname, 
       lastName: lname 
      } 
     }; 
     return this.props 
      .dispatch(registerUser(newUser)) 
      .then(() => this.props.dispatch(login(username, password))); 
    } 

    render() { 
     let errorMessage; 
     if (this.props.error) { 
      errorMessage = (
       <div className="message message-error">{this.props.error </div> 
      ); 
     } 

     return (
       <form className='signup-form' onSubmit={this.props.handleSubmit(values => 
       this.onSubmit(values) 
      )}> 

        {errorMessage} 
        <Field 
        name="fname" 
        type="text" 
        component={Input} 
        label="First Name" 
        validate={[required, nonEmpty]} 
        /> 
        <Field 
        name="lname" 
        type="text" 
        component={Input} 
        label="Last Name" 
        validate={[required, nonEmpty]} 
        /> 
        <Field 
        name="username" 
        type="email" 
        component={Input} 
        label="Email" 
        validate={[required, nonEmpty, email, isTrimmed]} 
        /> 
        <Field 
        name="password" 
        type="password" 
        component={Input} 
        label="Password" 
        validate={[required, nonEmpty, length({min: 10, max: 72})]} 
        /> 
        <button 
        type="submit" 
        disabled={this.props.pristine || this.props.submitting}> 
        Sign Up 
        </button> 
       </form>        
     ); 
    } 
} 
export default reduxForm({ 
    form: 'signup', 
    onSubmitFail: (errors, dispatch) => 
     dispatch(focus('signup', Object.keys(errors)[0])) 
})(SignUpForm); 

は私のテストで：

import React from 'react'; 
import {shallow, mount} from 'enzyme'; 
import SignUpForm from './signup'; 
import {registerUser} from '../actions/users'; 
import { reducer as formReducer } from 'redux-form' 
import { createStore, combineReducers, applyMiddleware } from 'redux' 
import { Provider } from 'react-redux' 
import thunk from 'redux-thunk'; 
import {stockReducer} from '../reducers'; 
describe('<SignUpForm />',() => { 
    let store 
    let wrapper 
    let dispatch 
    beforeEach(() => { 
     store = createStore(combineReducers({ form: formReducer, stock: stockReducer }),applyMiddleware(thunk)) 
     dispatch = jest.fn() 
     wrapper = mount(
      <Provider store={store}> 
       <SignUpForm dispatch={dispatch}/> 
      </Provider> 
     ); 
    }) 

    it('should fire onSubmit callback when form is submitted', (done) => { 
     const form = wrapper.find('form'); 
     form.find('#fname').simulate('change', {target: {value: 'fname'}}); 
     form.find('#lname').simulate('change', {target: {value: 'lname'}}); 
     form.find('#username').simulate('change', {target: {value: 'fname@email.com'}}); 
     form.find('#password').simulate('change', {target: {value: 'password1234'}}); 
     form.simulate('submit'); 
     expect(dispatch).toHaveBeenCalled(); 
    }); 
}); 

私のテストは、次のエラーで失敗します。 （jest.fnを（））を期待toHaveBeenCalled。 （） 呼び出された疑似モック関数が必要です。

どうか間違っていることを理解してください。

Answer 1

ここで問題となるのは、onSubmit関数によって返された約束について、テストのどこでも待たずに約束が解決される前にアサーションが実行されるということです。
コードを適切にリファクタリングして "テスト可能"にすることをお勧めします。 jestを使用して非同期呼び出しをテストする方法については、次のリンクをご覧ください。redux-thunkを使用することをお勧めします。