フェッチAPIリクエストでアクション作成者をテストする方法

Question

私はテストのためにReduxとJestを使ってcreate-react-appを持っています。私はfetchを使ってアクション作成者からAPIリクエストを作成しています。私がテストを書いているとき、私はこれまで何らかの理由で - この要求を模擬しようとしています - それはまだAPIへの実際の要求を行い、ネットワーク接続エラーを取得しようとしています。テスト時）。これは、ブラウザでうまく動作することに言及する価値があるかもしれません。

import fetch from 'isomorphic-fetch'; 
import { SUBMIT_SUCCESS, EMPLOYEE_DETAILS, ERROR } from './actionTypes'; 
import { API_URL } from '../../Constants'; 

export function getEmployeeDetails(id) { 
    return async dispatch => { 
    try { 
     let payload = await (await fetch(`${API_URL}/users/${id}`, { 
     method: 'GET', 
     headers: { jwt: localStorage.getItem('jwt') }, 
     })).json(); 

     dispatch(getEmployeeDetailsSuccess(payload.user)); 
    } catch (err) { 
     dispatch(errorCatch(err)); 
    } 
    }; 
} 

私はこれを試してみました - https://medium.com/@kellyrmilligan/testing-async-actions-in-redux-with-isomorphic-fetch-and-fetch-mock-35f98c6c2ee7

そして、基本的には、この上で動作するようにしようとする日のカップルを過ごした - https://medium.com/@ferrannp/unit-testing-with-jest-redux-async-actions-fetch-9054ca28cdcd

また、私はこの疲れています。

私は間違っていますか？このアクションをテストする方法の実例を得るチャンス？

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

Answer 1

正確に何をテストしますか？ fetchを嘲笑するには、fetch-mockのようなものがありますが、fetch作品に直接依存しないように、あなたのコードをリファクタリングすることもできます。今、あなたは良い/悪いペイロードを返す関数に渡すことで、あなたの方法をテストすることができ

export function getEmployeeDetails(fetcher, id) { 
    return async dispatch => { 
    let payload = await fetcher(id); 

    if (/* payload is good */) { 
     dispatch(getEmployeeDetailsSuccess(payload.user)); 
    } 
    else { 
     dispatch(errorCatch(err)) 
    } 
    }; 
} 

：

例えば、ちょうど右のアクションが派遣得ることを確認するために、あなたはこれらの線に沿って何かを使用することができます、およびmake sure that the right actions are dispatched。通常のコードでは、fetchをそのまま使用できますが、ロジックを直接処理クリエータに組み込むのではなく、そのロジックを処理する関数を渡すことができます。