Async Action создатель тестовых случаев, использующих Jest в реагировать

Question

Я новичок в writing the test cases в реакции.Здесь у меня есть создатель действия, который выглядит как

export function fetchUserJd() {
  return (dispatch) => {
    let url = FETCH_JD_ROOT_URL + page + "&" + size;
    dispatch({
      type: REQUEST_INITIATED
    })
    get(url)
      .then((response) => {
        console.log("response data",response.payload)
        if (response.status === 200) {
          dispatch({
            type: REQUEST_SUCCESSED,
          });
          dispatch({
            type: FETCHING_JOBDESCRIPTION_SUCCESS,
            data: response.payload,
          }
          )
        }
        else {
          dispatch({
            type: REQUEST_SUCCESSED
          })
          toastr.error("Error while fetching Job Description, Please check again");
          if (response.status === "") {
            toastr.error('Our server is down. Please check again');
          }
          dispatch({
            type: FETCHING_JOBDESCRIPTION_FAILED,
            data: response.status,
          });
          if (response.status === 401) {
            toastr.error('Please Login Again');
            localStorage.clear();
            history.push('/');
          }
        }
      })
  }
};

Итак, я пытаюсь написать тестовый пример для этого.

Итак, я попробовал,

beforeEach(function () {
    moxios.install();
  });

  afterEach(function () {
    moxios.uninstall();
  });

  it('creates GET_POSTS_SUCCESS after successfuly fetching postse', () => {
    moxios.wait(() => {
      const request = moxios.requests.mostRecent();
      console.log("request is",request);
      request.respondWith({
        status: 200,
        response: dataResponse,
      });
    });

    const expectedActions = [
      { type: 'FETCHING_JOBDESCRIPTION_SUCCESS', data: dataResponse },
    ];

    const store = mockStore({ data: {} })

    return store.dispatch(actions.fetchUserJd()).then(() => {
      // return of async actions
      expect(store.getActions()).toEqual(expectedActions);
    });
  });

Теперь я получаю эту ошибку, которая похожа на

● Header component actions › creates GET_POSTS_SUCCESS after successfuly fetching postse

    TypeError: Cannot read property 'then' of undefined

      at Object.it (src/modules/header/actions/_tests_/index.test.js:64:53)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at process._tickCallback (internal/process/next_tick.js:109:7)

Теперь я на самом деле не понимаю, почему эта ошибка появляется.

Как и явызывая действие, а затем я проверяю это, как оно вызывает ожидаемое или нет.

export const get = (url) =>
    axios.get(
        url,
        {
            headers: {
                "Authorization": localStorage.getItem("access_token") !== null ? `Bearer ` + localStorage.getItem("access_token") : null,
                "Content-Type": "application/json"
            }
        }
    ).then(data => {
        if (data.status === HttpStatus.OK) {
            return {
                status: data.status,
                payload: data.data
            };
        }
    }).catch(err => {
        return {
            status: err.response.data,
            payload: null
        };
    });

Итак, кто-нибудь может мне помочь с этой проблемой?

Answer 1

Я думаю, что ваша ошибка происходит отсюда, но это не проблема.

return store.dispatch(actions.fetchUserJd()).then(() => {
  // return of async actions
  expect(store.getActions()).toEqual(expectedActions);
});

Эта часть вашего кода пытается использовать функцию then для отправки (которая не возвращает Promise примомент).Это не то, что возвращает обещание.Первоначальный вызов actions.fetchUserJd () не имеет асинхронного поведения, он возвращает функцию, которая имеет доступ к диспетчеризации, и эта функция выполняет вызов API (асинхронный), но обрабатывает .then (). внутренне и не возвращает его.

Это означает, что можно ожидать его выполнения.Вы можете сделать возврат вашего действия Обещанием, как в примере для насмешливых асинхронных действий .

Его пример ниже

function fetchData () {
  return dispatch => {
    return fetch('/users.json') // Here returning the .then() of the fetch(equivalent of your get) is returning a promise, that's why for him the .then() call on the dispatch works in his tests !
      .then(() => dispatch(success()))
  };
}

Тогда выможет использовать ваш исходный код.

return store.dispatch(actions.fetchUserJd()).then(() => {
  // return of async actions
  expect(store.getActions()).toEqual(expectedActions);
});

Совершенно несвязанная вещь, на которую следует обратить внимание, это то, что вы непосредственно не используете функцию отклоненного обработчика вызова get в вашем действии.например:

get('http://localhost:3000/example')
   .then(
   (successData) => {
       // Do whatever you want to in case of positive resolution of the get call...
       // Will contain your response code and your data.
    },
    (rejectData) => {
       // Do whatever you want if the request fails, its error data is caught inside rejectData
    }
)