React and jest mock module

Question

Я создаю приложение, в котором я использую reducex и node-fetch для удаленной выборки данных.

Я хочу проверить факт, что я хорошо называю функцию выборки хорошим параметром.

Таким образом, я использую jest.mock и методы jasmine.createSpy:

it('should have called the fetch method with URL constant',() => { 
      const spy = jasmine.createSpy('nodeFetch'); 
      spy.and.callFake(() => new Promise(resolve => resolve('null'))); 
      const mock = jest.mock('node-fetch', spy); 
      const slug = 'slug'; 
      actionHandler[FETCH_REMOTE](slug); 
      expect(spy).toHaveBeenCalledWith(Constants.URL + slug); 
     }); 

Вот функцию, которую я пытаюсь тест:

[FETCH_REMOTE]: slug => { 
     return async dispatch => { 
      dispatch(loading()); 
      console.log(fetch()); // Displays the default fetch promise result 
      await fetch(Constants.URL + slug); 
      addLocal(); 
     }; 
    } 

Как вы можете видеть, я пытаясь зарегистрировать поведение console.log (fetch()), и у меня есть обещание по умолчанию разрешить заданное методом node-fetch, а не то, что я издеваюсь над Jest и шпионил за жасмином.

У вас есть идея, что он не работает?

EDIT: Мой тест отображается меня ошибка, как мой шпион никогда не был назван

Answer 1

Ваше действие обработчика фактически обработчик действия завода. В actionHandler[FETCH_REMOTE] вы создаете новую функцию. Возвращенные функции задают dispatch как параметр и вызывают код, который вы показываете.
Это означает, что ваш тестовый код никогда не вызовет какую-либо функцию для шпиона, поскольку созданная функция никогда не вызывается.

Я думаю, вам нужно будет создать макет dispatch функцию и сделать что-то вроде этого:

let dispatchMock = jest.fn(); // create a mock function 
actionHandler[FETCH_REMOTE](slug)(dispatchMock); 

EDIT:

Для меня ваш actionHandler больше похож на actionCreator, как это обычно называемый в терминах redux, хотя я лично предпочитаю называть их actionFactories, потому что это они: фабрики, которые создают действия.
Как вы используете thunks (?) Ваш actionCreater (который вводит в заблуждение имя actionHandler) напрямую не создает action, а другую функцию, которая вызывается, как только отправляется действие. Для сравнения, обычный actionCreator выглядит следующим образом:

updateFilter: (filter) => ({type: actionNames.UPDATE_FILTER, payload: {filter: filter}}), 

actionHandler с другой стороны, реагирует на действия, которые направляются и оценивает их полезную нагрузку.

Вот что я хотел бы сделать в вашем случае:

Создать новый объект под названием actionFactories как это:

const actionFactories = { 

    fetchRemote(slug): (slug) => { 
     return async dispatch => { 
      dispatch(loading()); 
      console.log(fetch()); // Displays the default fetch promise result 
      let response = await fetch(Constants.URL + slug); 

      var responseAction; 
      if (/* determine success of response */) { 
       responseAction = actionFactories.fetchSuccessful(response); 
      } else { 
       responseAction = actionFactories.fetchFailed(); 
      } 

      dispatch(responseAction); 
     }; 
    } 

    fetchFailed():() => ({type: FETCH_FAILED, }), 
    fetchSuccessful(response):() => ({type: FETCH_FAILED, payload: response }) 
}; 

Создать учетную actionHandler для FETCH_FAILED и FETCH_SUCCESSFUL для обновления магазина на основе ответа.

ОТВЕТ: Ваше заявление console.log не имеет особого смысла, поскольку fetch просто возвращает обещание.