Jestを使って単純な非同期のリアクションアクションをテストするには？

Question

私はReduxアクションをテストしようとしており、副作用のあるアクションをテストするための支援が必要です。ここで

は私のアクションです：

以下

export function login(email, password) { 
    return dispatch => { 
    dispatch(setLoginSuccess(false)); 
    loginApi(email, password, error => { 
     dispatch(setLoginPending(false)); 
     if (!error) { 
     dispatch(setLoginSuccess(true)); 
     } else { 
     dispatch(setLoginError(error)); 
     } 
    }); 
    } 
} 

は、ユーザを認証するためにloginApi関数です：フォームをシミュレートしながら、また、私は問題に直面しています

export function loginApi(email, password, callback) { 
    if (email === 'test@test.com' && password == '123') { 
     return callback(null); 
    } else { 
     return callback(new Error('Please provide valid email and password')); 
    } 
}; 

は、酵素と私のコンポーネントに提出し、冗談。ここで

は同じのためのコードである：ここで

render() { 
     let {email, password, emailValid} = this.state; 
     let {isLoginPending, isLoginSuccess, loginError} = this.props;  
     return (
       <div className="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1"> 
        <h3 className="text-center">Login</h3> 
        <form className="login-form" onSubmit={this.handleSubmit.bind(this)}> 
         <div className={emailValid? "form-group has-success" : (emailValid == undefined)? "form-group": "form-group has-error"}> 
          <label>Email address</label> 
          <input type="email" name="email" className="form-control" ref="userEmail" 
          placeholder="Enter your email" onChange={this.handleChange.bind(this)}/> 
         </div> 

         {/* Checking if email valid or not */} 
         {this.props.emailValid? "" : (this.props.emailValid == undefined)? "" : <p className="text-danger">Please provide a valid email!</p>} 

         <div className="form-group"> 
          <label>Password</label> 
          <input type="password" name="password" className="form-control" ref="userPassword" 
          placeholder="Enter your password" onChange={this.handleChange.bind(this)}/> 
         </div> 

         <button type ="submit" className="btn btn-primary btn-block" disabled={!this.props.emailValid}>Get Started</button> 

         {/* Displaying error messages */} 
         { loginError && <div className="auth-error-msg"><p className="text-danger">{loginError.message}</p></div> } 
        </form> 
       </div> 
     ); 
    }; 

はhandleSubmitイベントのコードです：

handleSubmit(e){ 
    e.preventDefault(); 
    this.props.login(this.refs.userEmail.value, this.refs.userPassword.value); 
    this.setState({ 
     email: '', 
     password: '' 
    }); 

} 

私はこの方法で提出するイベントをシミュレートしようとしています：

it('should render 1 error block on submitting invalid form',() => { 
     // Render a checkbox with label in the document 
     const spy = jest.fn(); 
     const component = shallow(<Login login={spy}/>); 

     const form = component.find('form').simulate('submit'); 

}); 

現在、preventDefaultが見つからないため、エラーが発生します。このイベントをテストするにはどうすればよいですか？

Answer 1

テストを分割することをお勧めします。フォームを送信し、アクションをテストすることは2つの別個のものです。 jestを使ってアクションをテストするには、モックストアにアクションをディスパッチして、ストアの最終状態を確認する必要があります。

複数のテストケースを実行し、想定されるアクションをパラメータとして渡したものに適合させることができます。

モックストアを作成するには、ジョブを実行できるパッケージが複数あります。ここでサンクをサポートする一例である：

import configureMockStore from 'redux-mock-store' 
import thunk from 'redux-thunk' 

const middlewares = [ thunk ] 
const mockStore = configureMockStore(middlewares) 
export default mockStore 

私は個人的にフォームを提出することをテストし、あまりにも多くの労力を費やしていないでしょう。結局のところ、それは標準的なHTMLのことなので、私は自分で構築したコンポーネントに焦点を当てます。

もう1つのヒント：reduxを使用する際に問題が発生した場合は、通常の状態に戻らないでください。あなたが持っているそのsetStateは、普通の減速機を使って、あなたの状態にそれを取り入れることによって、はるかに簡単に実装されテストされます。