양식 제출을 테스트 할 때 redux 양식의 효소 테스트가 실패합니다

Question

redux 양식을 사용하는 SignUp React 구성 요소가 있고 기본적으로 onSubmit은 비동기 작업을 전달합니다. Enzyme과 Jest를 사용하여 내 파견에 스파이를 추가하고 양식 제출을 시뮬레이션 할 때 파견을 요청하는지 검사하여 내 구성 요소를 테스트하려고합니다. 그러나 내 테스트는 실패합니다. 여기

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

내 테스트입니다 : : 여기

내 가입 REDUX 양식 구성 요소입니다

내 테스트는 다음과 같은 오류와 함께 실패

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를 사용하여 비동기 호출을 테스트하는 방법에 대한 링크를 살펴보십시오. https://facebook.github.io/jest/docs/en/asynchronous.html
redux-thunk을 사용하면 더 쉽게 사용할 수 있습니다.