Redux: Can not test async action base on redux.org tutorial

[craigcosmo]

I just wonder is there demo code of the async action test on redux.org?

I tried to remake the tutorial, here is my demo: https://github.com/craigcosmo/react-redux-test

action.js

import axios from 'axios'

export function getGoodDataStart(){
    return{
        type: "GOOD_DATA_START"
    }
}
export function getGoodDataSuccess(payload){
    console.log('success', payload)
    return {
        type: "GOOD_DATA_SUCCESS",
        payload: payload
    }
}
export function getGoodDataFail(){
    return{
        type: "GOOD_DATA_FAIL"
    }
}
export function getGoodData(){
    return (dispatch) => {
        dispatch( getGoodDataStart() )
        return  axios.get('http://www.google.com/list')
            .then( response => {
                console.log('fake res',response)
                dispatch(getGoodDataSuccess (response) )
            })
            .catch( err => {
                console.log('fake err',err)
            })
    }   
}

register.test.js

import nock from 'nock'
import React from 'react'
import {expect} from 'chai'
import {getGoodData} from 'registerAction'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'

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

describe('Register component', () => {

    it('async action', function () {

        nock('http://www.google.com')
        .get('/list')
        .reply(200,'ok!' )

        const store = mockStore({ 
            myData: '' ,
        })
        const expected = [
            {type: "GOOD_DATA_START"},
            {type: "GOOD_DATA_SUCCESS", payload: 'ok!'}
        ]

        return store.dispatch(getGoodData())
            .then( () => { 
                expect(store.getActions()).to.equal(expected)
            })
    })
})

The problem is, nock does not block the request as we think it would. Therefore, action actually makes the request to remote server, therefore, the result of the request is not the same as expectedResult

[timdorr]

This is an issue with nock or axios, and not Redux. You'll have better luck reaching out on Stack Overflow or those projects' appropriate support channels.

[craigcosmo]

but it's redux that put together this example right? My code is a copy the redux async action tutorial. You guys have been there so I think you know best what might have gone wrong.

[gaearon]

Somebody should take a look at that tutorial and make sure it’s solid and up to date. It was put up by different people over many months, and I think it might be broken/outdated in some places by now.

[timdorr]

Looks like #876 added the particular example code, so it's been a while. I don't use nock myself, so I can't comment on this being the latest and greatest.

What does Jest suggest for API mocking?

[oalmali]

I'm working on this issue.

[iurii-kyrylenko]

@oalmali: It seems I've got a working test for the async example. Hope it'll help )

import fetch from 'isomorphic-fetch';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import nock from 'nock';
import * as actions from './index';

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

describe('thunk', () => {

    it('should dispatch two regular actions: REQUEST_POSTS, RECEIVE_POSTS', () => {

        nock('https://www.reddit.com/r/')
            .get('/reactjs.json')
            .reply(200, {
                data: {
                    children: []
                }
            });

        const store = mockStore({
            postsByReddit: {},
            selectedReddit: 'reactjs'
        });

        const expectedActions = [ 'REQUEST_POSTS', 'RECEIVE_POSTS' ];

        return store.dispatch(actions.fetchPostsIfNeeded('reactjs'))
            .then(() => {
                expect(store.getActions().map(action => action.type))
                .toEqual(expectedActions);
            });
    });
});

[iurii-kyrylenko]

Also, in my opinion, the following refactoring is possible:

--- a/async/src/containers/App.js
+++ b/async/src/containers/App.js
@@ -18,15 +18,10 @@ class App extends Component {
     dispatch(fetchPostsIfNeeded(selectedReddit))
   }

-  componentWillReceiveProps(nextProps) {
-    if (nextProps.selectedReddit !== this.props.selectedReddit) {
-      const { dispatch, selectedReddit } = nextProps
-      dispatch(fetchPostsIfNeeded(selectedReddit))
-    }
-  }
-
   handleChange = nextReddit => {
-    this.props.dispatch(selectReddit(nextReddit))
+    const { dispatch } = this.props;
+    dispatch(selectReddit(nextReddit));
+    dispatch(fetchPostsIfNeeded(nextReddit));
   }

   handleRefreshClick = e => {

[oalmali]

can you guys review PR that I've opened which contains a simpler example that works with isomorphic-fetch and nock. There is no problem with mocking capabilities of nock. Thanks @iurii-kyrylenko btw.

[craigcosmo]

Would testing environment effect the behavior of nock? I was testing it with mocha in browser.

[oalmali]

@craigcosmo I think you will find more help on StackOverflow which people might focus on integrating different things together. What I'm sure is; there is nothing wrong with current tutorial.

[oalmali]

@timdorr so my suggestion would be to have a tutorial which enables people to plug and play without any additional code (with the String constants as action types). I don't know is this the thing that you imply by saying 'complete revamp' or is there any additional needs?

[jabacchetta]

This might be axios related? I'm having the same problem with axios and the current tutorial. See this issue.

[jabacchetta]

For anyone else having issues with nock + axios, the solution is to replace nock with moxios.

[timdorr]

Sounds like the best course of action is just to use different tooling depending on what HTTP client library you use. Since the example works with isomorphic-fetch as intended, I don't think we need to do anything to the docs here.

[jinxac]

Even i trying it with axios and was not able to get this working. But finally moxios came to rescue. You can try following:-

"use strict";


import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";
import moxios from "moxios";
import {UPDATE} from "../actions";
import {fetch as getAccessToken} from "../api";

const mockStore = configureMockStore([thunk]);


describe("accessToken actions", () => {

  beforeEach(function () {
    moxios.install();
  });

  afterEach(function () {
    moxios.uninstall();
  });

  it("getting access token", () => {
    moxios.wait(() => {
      const request = moxios.requests.mostRecent();
      request.respondWith({
        status: 200,
        response: {
          accessToken: "test-token"
        },
      });
    });

    const expectedActions = [
      {
        type: UPDATE,
        payload: "test-token"
      }
    ];

    const store = mockStore({});

    return store.dispatch(getAccessToken()).then(() => {
      // return of async actions
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});