how to write test cases for redux async actions using axios?

Question

Following is a sample async action creator.

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
         }
}

Now following is the test case I have wrote:

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();
  });
})

I am getting the following error:

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)

Why is this error coming and how can it be solved?

There is good guide - redux.js.org/docs/recipes/WritingTests.html — Oleksandr T.
– Oleksandr T., Commented May 17, 2017 at 10:20

luboskrnac · Accepted Answer · 2017-05-17 12:45:14Z

2

I suggest you to take a look at moxios. It is axios testing library written by axios creator.

For asynchronous testing you can use mocha async callbacks.

As you are doing async actions, you need to use some async helper for Redux. redux-thunk is most common Redux middleware for it (https://github.com/gaearon/redux-thunk). So assuming you'll change your action to use dispatch clojure:

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

Sample test can look like this:

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();
        });
    });
});

edited May 17, 2017 at 12:45

answered May 17, 2017 at 10:26

luboskrnac

24.7k10 gold badges86 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arun Mohan Over a year ago

I am gettting the following error,when trying the above code: "TypeError: actions.getAllAnalysis(...) is not a function" I have required the action file but still getting the error. What might be the reason?

luboskrnac Over a year ago

Sorry I missed you made a mistake to execute async Redux actions without async middleware. Updated my answer.

Arun Mohan · Accepted Answer · 2017-05-18 12:45:03Z

I found out it was because, I had to use a mock store for the testing along with "thunk" and "redux-promises"

Here is the code which made it solve.

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())
    })
})
})

Collectives™ on Stack Overflow

how to write test cases for redux async actions using axios?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related