反應和笑話模擬模塊

我正在創建一個應用程序，其中我使用REDX和節點獲取遠程數據獲取。反應和笑話模擬模塊

我想測試一個事實，即我很好地調用具有良好參數的獲取函數。

這樣，我使用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模擬的並且用jasmine窺探的。

你知道它不起作用嗎？

編輯：我的測試顯示我像我的間諜錯誤從來沒有被稱爲

來源

2016-10-14 mfrachet

你的動作處理實際上是一個動作處理廠。在actionHandler[FETCH_REMOTE]中，您正在創建一個新功能。返回的函數將dispatch作爲參數並調用您所顯示的代碼。
這意味着您的測試代碼將永遠不會調用間諜的任何函數，因爲從不調用創建的函數。

我想你需要創建一個模擬dispatch功能，做這樣的事情：

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

編輯：

對我來說，你的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 }) 
};

創建FETCH_FAILED和FETCH_SUCCESSFUL一個的ActionHandler更新基於響應商店。

順便說一句：您的console.log聲明並沒有多大意義，因爲fetch只是返回一個承諾。

來源

2016-10-15 14:48:34

反應和笑話模擬模塊

回答

相關問題