如何使用axios为redux异步操作编写测试用例？

Question

下面是一个异步操作创建器示例。

export const GET_ANALYSIS = 'GET_ANALYSIS';
export function getAllAnalysis(user){
  let url = APIEndpoints["getAnalysis"];
  const request = axios.get(url);
  return {
             type:GET_ANALYSIS,
             payload: request
         }
}

下面是我写的测试用例：

describe('All actions', function description() {
  it('should return an action to get All Analysis', (done) => {
    const id = "costnomics";
    const expectedAction = {
      type: actions.GET_ANALYSIS
    };


    expect(actions.getAllAnalysis(id).type).to.eventually.equal(expectedAction.type).done();
  });
})

我收到以下错误：

All actions should return an action to get All Analysis:
     TypeError: 'GET_ANALYSIS' is not a thenable.
      at assertIsAboutPromise (node_modules/chai-as-promised/lib/chai-as-promised.js:29:19)
      at .<anonymous> (node_modules/chai-as-promised/lib/chai-as-promised.js:47:13)
      at addProperty (node_modules/chai/lib/chai/utils/addProperty.js:43:29)
      at Context.<anonymous> (test/actions/index.js:50:5)

为什么会出现这个错误，如何解决它？

Answer 1

我建议你去看看moxios。它是由axios创建者编写的axios测试库。

对于异步测试，您可以使用mocha async callbacks。

当您正在执行异步操作时，您需要为Redux使用一些异步助手。redux-thunk是最常见的Redux中间件(https://github.com/gaearon/redux-thunk)。因此，假设您将更改您的操作以使用dispatch clojure：

const getAllAnalysis => (user) => dispatch => {
  let url = APIEndpoints["getAnalysis"];
  const request = axios.get(url)
      .then(response => disptach({
         type:GET_ANALYSIS,
         payload: response.data
      }));
}

示例测试可能如下所示：

describe('All actions', function description() {
    beforeEach("fake server", () => moxios.install());
    afterEach("fake server", () => moxios.uninstall());

    it("should return an action to get All Analysis", (done) => {
        // GIVEN
        const disptach = sinon.spy();
        const id = "costnomics";
        const expectedAction = { type: actions.GET_ANALYSIS };
        const expectedUrl = APIEndpoints["getAnalysis"];
        moxios.stubRequest(expectedUrl, { status: 200, response: "dummyResponse" });

        // WHEN
        actions.getAllAnalysis(dispatch)(id);

        // THEN
        moxios.wait(() => {
            sinon.assert.calledWith(dispatch, {
                type:GET_ANALYSIS,
                payload: "dummyResponse"
            });
            done();
        });
    });
});

Answer 2

我发现这是因为，我不得不使用一个模拟商店进行测试，同时使用"thunk“和"redux-promises”。

这是使它解算的代码。

const {expect}  = require('chai');
const actions = require('../../src/actions/index')

import ReduxPromise from 'redux-promise'

import thunk from 'redux-thunk'
const middlewares = [thunk,ReduxPromise] 

import configureStore from 'redux-mock-store'

const mockStore = configureStore(middlewares)


describe('store middleware',function description(){
  it('should execute fetch data', () => {
  const store = mockStore({})

  // Return the promise
  return store.dispatch(actions.getAllDashboard('costnomics'))
    .then(() => {
      const actionss = store.getActions()
      console.log('actionssssssssssssssss',JSON.stringify(actionss))
      // expect(actionss[0]).toEqual(success())
    })
})
})