{"action":"created","issue":{"url":"https://api.github.com/repos/pburtchaell/redux-promise-middleware/issues/193","repository_url":"https://api.github.com/repos/pburtchaell/redux-promise-middleware","labels_url":"https://api.github.com/repos/pburtchaell/redux-promise-middleware/issues/193/labels{/name}","comments_url":"https://api.github.com/repos/pburtchaell/redux-promise-middleware/issues/193/comments","events_url":"https://api.github.com/repos/pburtchaell/redux-promise-middleware/issues/193/events","html_url":"https://github.com/pburtchaell/redux-promise-middleware/issues/193","id":301493357,"number":193,"title":"Testing chained actions inside integration tests with Axios","user":{"login":"priley86","id":4237045,"avatar_url":"https://avatars2.githubusercontent.com/u/4237045?v=4","gravatar_id":"","url":"https://api.github.com/users/priley86","html_url":"https://github.com/priley86","followers_url":"https://api.github.com/users/priley86/followers","following_url":"https://api.github.com/users/priley86/following{/other_user}","gists_url":"https://api.github.com/users/priley86/gists{/gist_id}","starred_url":"https://api.github.com/users/priley86/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/priley86/subscriptions","organizations_url":"https://api.github.com/users/priley86/orgs","repos_url":"https://api.github.com/users/priley86/repos","events_url":"https://api.github.com/users/priley86/events{/privacy}","received_events_url":"https://api.github.com/users/priley86/received_events","type":"User","site_admin":false},"labels":[{"id":500711116,"url":"https://api.github.com/repos/pburtchaell/redux-promise-middleware/labels/documentation","name":"documentation","color":"c5def5","default":false},{"id":235530090,"url":"https://api.github.com/repos/pburtchaell/redux-promise-middleware/labels/question","name":"question","color":"cc317c","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2018-03-01T17:32:36Z","updated_at":"2018-04-18T14:34:41Z","closed_at":"2018-04-18T13:29:00Z","author_association":"NONE","body":"\r\n## Version Number\r\n^5.0.0\r\n\r\n## Code Example\r\nHi, thanks so much for this terrific middleware. I believe I am approaching a test case that has not been mentioned here and would really appreciate some advice. This will impact the way we do test cases a lot going forward potentially at Red Hat, Inc. (as promise-middleware has made the cut in our current fold 😄 )\r\n\r\nI'm currently attempting to write integration tests whereby actions/reducers are fully run (my actions are hooked via axios responses) and then I am asserting snapshots on the reduced connected component state. I've noted that the redux-mock-store will not accept reducers, so an alternative path I've attempted is using a \"real\" Redux store and and wiring everything up like I do normally...\r\n\r\nThis all works fine for a single initial action being fired (dispatched) and I am able to receive the incoming state. However, if I want to fire subsequent actions in my integration test, the Redux store does not dispatch them...\r\n\r\nHere is the full test case I have now:\r\n```\r\nimport React from 'react';\r\nimport thunk from 'redux-thunk';\r\nimport promiseMiddleware from 'redux-promise-middleware';\r\nimport { createStore, applyMiddleware, combineReducers } from 'redux';\r\nimport { mount } from 'enzyme';\r\nimport { Provider } from 'react-redux';\r\nimport { initialState } from '../overview.fixtures';\r\nimport Overview from '../Overview';\r\nimport OverviewContainer, { reducers } from '../index';\r\n\r\nimport { coreComponents } from '../../../../../components';\r\nimport componentRegistry from '../../../../../components/componentRegistry';\r\n\r\njest.mock('../../../../../components/componentRegistry');\r\ncomponentRegistry.registerMultiple(coreComponents);\r\n\r\ndescribe('Overview integration test', () => {\r\n  const middlewares = [thunk, promiseMiddleware()];\r\n  const generateStore = () =>\r\n    createStore(\r\n      combineReducers({ ...reducers }),\r\n      {\r\n        overview: initialState\r\n      },\r\n      applyMiddleware(...middlewares)\r\n    );\r\n\r\n  const mountComponent = store =>\r\n    mount(\r\n      <Provider store={store}>\r\n        <OverviewContainer />\r\n      </Provider>\r\n    );\r\n\r\n  it('should mount the Overview with mapStateToProps reduced', () => {\r\n    const store = generateStore();\r\n    const wrapper = mountComponent(store);\r\n\r\n    // query the unconnected component to assert reduced props\r\n    const component = wrapper.find(Overview);\r\n\r\n    expect(component.props()).toMatchSnapshot();\r\n  });\r\n});\r\n```\r\n\r\nSnapshot (of reduced initial state):\r\n\r\n```\r\n// Jest Snapshot v1, https://goo.gl/fbAQLP\r\n\r\nexports[`Overview integration test should mount the Overview with mapStateToProps reduced 1`] = `\r\nObject {\r\n  \"hideMappingWizard\": false,\r\n  \"hidePlanWizard\": false,\r\n  \"mappingWizardVisible\": false,\r\n  \"planWizardVisible\": false,\r\n  \"showMappingWizardAction\": [Function],\r\n  \"showPlanWizardAction\": [Function],\r\n}\r\n`;\r\n```\r\n\r\nAll of this code can currently be found here:\r\nhttps://github.com/priley86/miq_v2v_ui_plugin/blob/master/app/javascript/react/screens/App/Overview/__test__/index.test.js\r\n\r\n\r\nI know there are examples of how to mock the store and the store's dispatch in this projects sample tests w/ Sinon, however those aren't very familiar to me....\r\n\r\nWould someone be willing to get a few examples w/ axios / Jest and show how to correctly mock store and integrate subsequent actions?\r\n\r\nP.s. I have had no troubles testing Actions individually w/ redux-mock-store...and that much is working great ;)\r\n\r\nThose are looking like this:\r\n```\r\nimport configureMockStore from 'redux-mock-store';\r\nimport thunk from 'redux-thunk';\r\nimport promiseMiddleware from 'redux-promise-middleware';\r\nimport * as actions from '../MappingWizardClustersStepActions';\r\nimport {\r\n  initialState,\r\n  requestSourceClustersData,\r\n  requestTargetClustersData\r\n} from '../mappingWizardClustersStep.fixtures';\r\nimport {\r\n  mockRequest,\r\n  mockReset\r\n} from '../../../../../../../../../common/mockRequests';\r\n\r\nconst middlewares = [thunk, promiseMiddleware()];\r\nconst mockStore = configureMockStore(middlewares);\r\nconst store = mockStore(initialState);\r\n\r\nafterEach(() => {\r\n  store.clearActions();\r\n  mockReset();\r\n});\r\n\r\ndescribe('mappingWizard actions', () => {\r\n  it('should fetch source clusters and return PENDING and FULFILLED action', () => {\r\n    const { fetchSourceClustersUrl } = requestSourceClustersData;\r\n    mockRequest({\r\n      fetchSourceClustersUrl,\r\n      status: 200\r\n    });\r\n    return store\r\n      .dispatch(actions.fetchSourceClustersAction(fetchSourceClustersUrl))\r\n      .then(() => {\r\n        expect(store.getActions()).toMatchSnapshot();\r\n      });\r\n  });\r\n  it('should fetch source clusters and return PENDING and REJECTED action', () => {\r\n    const { fetchSourceClustersUrl } = requestSourceClustersData;\r\n    mockRequest({\r\n      fetchSourceClustersUrl,\r\n      status: 404\r\n    });\r\n    return store\r\n      .dispatch(actions.fetchSourceClustersAction(fetchSourceClustersUrl))\r\n      .then(() => {\r\n        expect(store.getActions()).toMatchSnapshot();\r\n      });\r\n  });\r\n```\r\n\r\n## Expected Behavior\r\nThis is not a bug. Just a request for documentation examples.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/pburtchaell/redux-promise-middleware/issues/comments/382408682","html_url":"https://github.com/pburtchaell/redux-promise-middleware/issues/193#issuecomment-382408682","issue_url":"https://api.github.com/repos/pburtchaell/redux-promise-middleware/issues/193","id":382408682,"user":{"login":"priley86","id":4237045,"avatar_url":"https://avatars2.githubusercontent.com/u/4237045?v=4","gravatar_id":"","url":"https://api.github.com/users/priley86","html_url":"https://github.com/priley86","followers_url":"https://api.github.com/users/priley86/followers","following_url":"https://api.github.com/users/priley86/following{/other_user}","gists_url":"https://api.github.com/users/priley86/gists{/gist_id}","starred_url":"https://api.github.com/users/priley86/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/priley86/subscriptions","organizations_url":"https://api.github.com/users/priley86/orgs","repos_url":"https://api.github.com/users/priley86/repos","events_url":"https://api.github.com/users/priley86/events{/privacy}","received_events_url":"https://api.github.com/users/priley86/received_events","type":"User","site_admin":false},"created_at":"2018-04-18T14:34:41Z","updated_at":"2018-04-18T14:34:41Z","author_association":"NONE","body":"Thanks and apologies for not being able to fit this into my schedule. I will provide a better description /demo boiler next time when we are ready on this side 👍"}}
{"actor":{"display_login":"priley86"}}