CODEWITHSUNDEEP
testingreduxreact-router
ynnadkrap
ynnadkrap

Reputation: 258

Testing async redux action with call to browserHistory

I'm having an issue testing an async redux action (using thunk) that throws an error because browserHistory is undefined.

(code modified for brevity)

actions.js

import { browserHistory } from 'react-router'
import axios from 'axios'

export function foo() {
  return dispatch => {
    return axios.post('/foo')
      .then(res => { dispatch(something); browserHistory.push('/') })
      .catch(err => { dispatch(somethingError) }
  }
}

test/actions.js

import nock from 'nock'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'

const mockStore = configureMockStore([thunk])

describe('foo succeeds', () => {
  nock('localhost:300')
    .post('/foo')
    .reply(200)

  const store = mockStore()

  return store.dispatch(actions.foo())
    .then(expect(store.getActions()).to.equal(something))
})

This of course leads to TypeError: Cannot read property 'push' of undefined, which prompts an unhandled promise rejection. Is there any way I can mock out browserHistory or handle the error elegantly in the test?

Upvotes: 0

Views: 808

Answers (1)

ynnadkrap
ynnadkrap

Reputation: 258

Turned out to be a simple fix. In your test file you can mock out react-router:

import * as router from 'react-router'

router.browserHistory = { push: () => {} }

Upvotes: 3

Related Questions