如何使用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响应的期望，或者不满足。