アキシャルを使用したリアクションテスト

Question

私は最近Reactアプリケーションのテストを開始しました。しかし、私はフォームを提出したときに遭遇しました。私のテストではほとんどの行がカバーされていますが、はフォームフォームの実際の部分に欠けています。

LoginForm.js - フォーム

  const userLoginData = { 
       userId : this.state.userId, 
       password : this.state.password, 
       userType : this.state.userType 
      }; 

      axios({ 
       data : JSON.stringify(userLoginData), 
       type : 'post', 
       url : Constant.BASE_URL_SERVER+'/rest/login', 
       headers : { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json' 
       }, 
       cache : false 
      }) 
      .then(function (response) { 
       //alert("Form Submitted."); 
       this.setState({isLoggedIn : true}); 
       this.setState({loginResponse : "Login Success!"}); 
       if(this.state.userType === 'Customer'){ 
    ... 

login_form-test.js

 describe('testing form submission onSubmit',() => { 
      const testData = { 
       userId: '00000000', 
       password: 'SamplePassword0', 
       userType: 'Customer', 
       validForm: true, 
      } 

      it('should submit form onSubmit()',() => { 
       const mountedComponentHandle = mount(<LoginForm {...testData}/>); 
       const onSubmitForm = sinon.spy(
        mountedComponentHandle.instance(), 
        'handleSubmitForm' 
       ); 
       mountedComponentHandle.update(); 
       const formHandle = mountedComponentHandle.find('form'); 
       expect(formHandle.length).toBe(1); 

       formHandle.simulate('submit'); 
       expect(onSubmitForm.called).toBe(true); 
      }); 
     }); 

を提出をテストする方法について提案してください。 0および.catch()の腋窩。

ありがとうございました。

Answer 1

ここでのキーは、コードを「テスト可能」にすることです。責任を分けることは、コードをより見やすく、読みやすく、保守しやすくするのに役立ちます。あなたのケースでは、APIを介してデータを投稿するロジックは、アプリのAPIリクエストを処理するいくつかのサービスにあり、別々にテストすることができます。
あなたの質問に戻って来て、私はあなたのケースであなたのテストの非同期呼び出しのための可能な解決策の一つを提供しています：

// apiGateway.js 
const postData = (url, data) => (
    axios({ 
     data: JSON.stringify(data), 
     type: 'post', 
     url: BASE_URL_SERVER + url, 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json' 
     }, 
     cache: false 
    }) 
); 

が再びあなたは別に、コードの上にテストすることができます。

// myAppApi.js 
const postLoginForm = (data, callback, errorCallback) => { 
    return postData('/rest/login', data) 
     .then((response) => callback(response.data)) 
     .catch((error) => errorCallback(error)) 

}; 

// myAppApi.test.js 
// import * as myAppApi from '../myAppApi' 
it('should call callback when response is successful', async() => { 
    const mockResponse = {}; 
    const mockRequestData = {}; 
    const mockSuccessCallback = jest.fn(); 
    const mockErrorCallback = jest.fn(); 

    spyOn(myAppApi, 'postLoginForm').and.returnValue(Promise.resolve(mockResponse)); 

    await myAppApi.postLoginForm(mockRequestData, mockSuccessCallback, mockErrorCallback); 

    expect(mockSuccessCallback).toHaveBeenCalled(); 
}); 

it('should call error callback when response is failed', async() => { 
    const mockRequestData = {}; 
    const mockSuccessCallback = jest.fn(); 
    const mockErrorCallback = jest.fn(); 

    spyOn(myAppApi, 'postLoginForm').and.returnValue(Promise.reject()); 

    await myAppApi.postLoginForm(mockRequestData, mockSuccessCallback, mockErrorCallback); 

    expect(mockErrorCallback).toHaveBeenCalled(); 
}); 

上記のテストでは、異なるモッキング方法またはライブラリを使用できます。あなたは、ロジックを分離することはテストに役立ちます見ることができるように
そして最後に、あなたのコンポーネントは、この

// LoginForm.js 
class LoginForm extends React.Component { 
    onSuccessfulLogin(responseData) { 
     //.. success logic here 
    } 

    onFailedLogin(error) { 
     //.. error logic here 
    } 

    onSubmitForm(event) { 
     postLoginForm(this.state.data, this.onSuccessfulLogin, this.onFailedLogin) 
    } 
} 

ようになります。さらにそれはあなたのコードのトンを持つコンポーネントで終わるのを助けるでしょう。コンポーネントの状態とプレゼンテーションをテストできます。
これはあなたの質問にお答えします。