Redux Mock Store дает «Действия должны быть простыми объектами». Используйте специальное промежуточное ПО для асинхронных действий».

Я пытаюсь протестировать некоторый асинхронный код в своем приложении React, используя redux-mock-store.

const configureMockStore = require('redux-mock-store').default;
const thunk = require("redux-thunk").default;

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

const dummy = () => {
  // Mock Ajax call
  return new Promise((resolve, reject) => {
      setTimeout(() => resolve({data: 'data'}), 200)
  })
};

describe("Redux Mock Store", () => {
  it("Test Dummy Ajax call", () => {
    const expectedActions = [
      { type: "SUCCESS", payload: "success" },
      { type: "FAILURE", error: { Error: "Error" } }
    ];
    const store = mockStore({});

    store.dispatch(dummy().then(() => {
              expect(store.getActions()).toEqual(expectedActions) 
           }).catch(error => { console.log(error) }))
  });
});

Я использую Jest для запуска этого теста. Я получаю следующую ошибку при выполнении вышеуказанного теста Actions must be plain objects. Use custom middleware for async actions. Что здесь не так?


javascript redux testing jestjs redux-mock-store
person darKnight    schedule 22.04.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Проблема в том, что вы используете промежуточное ПО redux-thunk, но вы не отправляете никаких действий после того, как ваше обещание разрешается (вы можете проверить, как определить создателя действия, который использует redux-thunk в документации).

Итак, вам нужно определить создателя действия, который использует ваш фиктивный запрос ajax и отправляет действие после его завершения:

const dummy = () => {
    // Mock Ajax call
    // Note that you are not capturing any error in here and you are not
    // calling the reject method, so your *catch* clausule will never be
    // executed.
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve({ data: 'success' }), 200);
    });
};

const actionCreator = () => (dispatch) => {
    return dummy()
        .then(payload => dispatch({ type: 'SUCCESS', payload }))
        .catch(error => dispatch({ type: 'FAILURE', error }));
};

Обратите внимание, как создатель действия получает параметр dispatch (который предоставляется промежуточным программным обеспечением redux-thunk), и мы используем эту функцию для отправки наших действий (которые являются простыми объектами).

Как только вы вызовете своего создателя действия с правильными параметрами, вы должны вернуть свое обещание в it, чтобы он дождался, пока обещание не будет разрешено, и выполнил ожидания внутри оператора then. :

describe('Redux Mock Store', () => {
    it('Test Dummy Ajax call', () => {
        const expectedActions = [
            { type: 'SUCCESS', payload: { data: 'success' } },
        ];
        const store = mockStore({});

        return store.dispatch(actionCreator()).then(() => {
            expect(store.getActions()).toEqual(expectedActions);
        });
    });
});

Кроме того, примите во внимание, что в вашем первоначальном тесте вы ожидаете, что будут отправлены два действия, но вы вызываете своего создателя действия только один раз. Вы должны протестировать случай сбоя в другом этом.

Вы можете увидеть работающее решение здесь.

person mgarcia    schedule 22.04.2019
comment
Запуск вашего кода дает ошибку TypeError: actionCreator(...).then is not a function - person darKnight; 22.04.2019
comment
Это должно работать нормально... Вы добавляете пункт then после вызова dispatch? - person mgarcia; 23.04.2019
comment
В TypeError, о которой вы сообщили, кажется, что вы помещаете предложение then после вызова actionCreator вместо dispatch - person mgarcia; 26.04.2019