如何使用Jest在異步調用中測試動作縮減器並進行調度？

Question

我是Jest的新手，正在嘗試對異步動作創建者進行測試。 問題是，我只看到了一些測試示例，其中有一個用於操作創建者的方法和一個用於調度的其他單獨方法。 我的動作創建者將分派作為異步回調函數，但我不知道如何進行測試。 我的Action Reducer看起來像這樣：

export const postConnection = (connectionUrl, username, password) => {
    return async (dispatch) => {
        const response = await requireAuthActions.post('/db/conexion', JSON.stringify({ connectionUrl, username, password }));
        dispatch({ type: POST_CONNECTION, payload: response.data });
        history.push('/conexiones');
    }
}

而且我嘗試執行測試腳本，但是當我運行它時，它會引發錯誤。 該腳本如下所示：

describe('Pruebas de Conexiones', () => {
    describe('Action Creators', () => {
        it("Crear conexión", async () => {
            const dispatch = jest.fn();
            const {data} = await postConnection('www.google.com', 'root', 'password')(dispatch);
            dispatch({});
        });
    });
});

當我嘗試運行測試腳本時，它將引發下一個錯誤：

Request failed with status code 401

      at createError (node_modules/axios/lib/core/createError.js:16:15)
      at settle (node_modules/axios/lib/core/settle.js:17:12)
      at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:237:11)

有沒有像我這樣的測試行動創建者的方法？

編輯現在，我有一個模擬文件，其中包含一個用於axios的模擬文件，如下所示：

const mockAxios = jest.genMockFromModule('axios');

mockAxios.create = jest.fn(() => mockAxios)

export default mockAxios

但是現在我的問題是我不知道如何在測試文件中實現它。 現在我有這樣的事情：

import thunk from 'redux-thunk';
import mockAxios from 'axios';

const middlewares = [thunk];
const mockStore = configureStore(middlewares);

describe('Test de conexiones', () =>{
    describe('Action Creators', () =>{
        it('Agregar conexión', async () =>{
            const store = mockStore({});
            const mockData = {data:123};
            mockAxios.get.mockImplementationOnce(()=>Promise.resolve({data: mockData}));

            const expectedActions = [
                {type: POST_CONNECTION, data: mockData}
            ]
            const dispatch = jest.fn();
            const response = await postConnection('www.google.com','root','password')(dispatch);
        });
    });
});

這會引發下一個錯誤：

TypeError: Cannot read property 'data' of undefined

      12 |     return async (dispatch) => {
      13 |         const response = await requireAuthActions.post('/db/conexion', JSON.stringify({ connectionUrl, username, password }));
    > 14 |         dispatch({ type: POST_CONNECTION, payload: response.data });
         |                                                             ^
      15 |         history.push('/conexiones');
      16 |     }
      17 | }

Answer 1

我看到兩種可能的方法：使用真實商店或redux-mock-store

步驟相似：

1. 設置商店。
2. 模擬一些外部API（例如http調用）或至少帶有某些響應（成功或失敗）的requireAuthActions模塊（請檢查有關嘲笑的Jest文檔 ）
3. 暫停以等待（＃2中嘲笑的所有Promise.resolve()類的異步內容setTimeout(..., 0)以等待await（ await Promise.resolve(); flush-promises或setTimeout(..., 0) ）。
4. 如果您使用的是真實商店-那么請檢查store（如果使用此抽象級別，則使用選擇器進行檢查），如果其中包含您希望根據在＃2中模擬的響應看到的數據
5. 如果是redux-mock-store ，則無法驗證狀態下的數據（因此，應該分別測試reducer），因此只需驗證生成的操作列表-如果它們滿足基於＃2中redux-mock-store響應的期望，或者不滿足。