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

【问题标题】：how to write test cases for redux async actions using axios?如何使用 axios 为 redux 异步操作编写测试用例？
【发布时间】：2017-05-17 09:40:38
【问题描述】：

以下是示例异步操作创建器。

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)

为什么会出现这个错误以及如何解决？

【问题讨论】：

有很好的指导 - redux.js.org/docs/recipes/WritingTests.html

标签： javascript reactjs redux mocha.js axios

【解决方案1】：

我建议你看看moxios。是由 axios creator 编写的 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();
        });
    });
});

【讨论】：

在尝试上述代码时出现以下错误：“TypeError: actions.getAllAnalysis(...) is not a function” 我需要操作文件，但仍然出现错误。可能是什么原因？
对不起，我错过了你在没有异步中间件的情况下执行异步 Redux 操作时犯了一个错误。更新了我的答案。

【解决方案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())
    })
})
})

【讨论】：