Enzymtest für Reduxform schlägt fehl beim Testen der Formularübergabe

Question

Ich habe eine SignUp-React-Komponente, die Redux-Form verwendet und mein onSubmit sendet im Grunde eine asynchrone Aktion. Ich versuche, meine Komponente mit Enzyme und Jest zu testen, indem ich einen Spion zu meinem Dispatch hinzufüge und überprüfe, ob der Dispatch bei der Simulation einer Formularübergabe aufgerufen wird. Mein Test schlägt jedoch fehl.

Hier ist meine SignUp redux Form Komponente:

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

Hier ist mein Test:

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

Mein Test mit dem folgenden Fehler fehl: erwarten (jest.fn()) toHaveBeenCalled.() Erwartete Scheinfunktion wurde aufgerufen.

Bitte helfen Sie mir zu verstehen, was schief läuft.

Answer 1

Das Problem hier ist, dass man nicht überall in Ihrem Test auf dem Versprechen von Ihrer onSubmit Funktion zurück wartet so wird Ihre assert ausgeführt zu werden, bevor Ihr Versprechen löst.
Ich werde vorschlagen, dass Sie Ihren Code richtig umgestalten, um es "testbar" zu machen. Sie können einen Blick auf folgenden Link auf, wie async testen Anrufe Scherz mit: https://facebook.github.io/jest/docs/en/asynchronous.html
Ich werde vorschlagen, dass Sie auch redux-thunk verwenden, die Ihnen das Leben leichter machen.