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

步骤相似：

设置商店。
模拟外部API（例如http调用）或至少具有某些响应（成功或失败）的requireAuthActions模块（检查jest's docs on mocking）
暂停一下以等待（await Promise.resolve();，flush-promises或setTimeout(..., 0)）所有异步事物，例如您在＃2中嘲笑的Promise.resolve()。
如果您使用真实商店-然后检查store（如果使用此抽象级别，则使用选择器进行检查）是否包含您希望根据在＃2中模拟的响应看到的数据
如果是redux-mock-store，则您无法验证状态下的数据（因此，应分别测试reducer），因此只需验证生成的操作列表-如果它们满足是否基于＃2中模拟的响应，就可以了。

如何使用Jest在异步调用中测试动作缩减器并进行调度？

1 个答案: