fetch API 요청을 사용하여 작업 생성자를 테스트하는 방법

Question

테스트 용 Redux 및 Jest를 사용하여 create-reaction-app를 작성했습니다. 작업 작성자로부터 API 요청을 만들기 위해 fetch를 사용하고 있습니다. 필자가 테스트를 작성하면서 필자가이 요청을 모의하려고 시도한 이유가 무엇인지 알아 냈습니다. 여전히 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을 그대로 사용할 수 있지만 해당 논리를 처리하는 함수를 전달하여 액션 작성자에게 직접 포함시키는 것이 아닙니다.