Faking History for react-router v3, v4 and react-router-redux

Published May 19, 2017
Faking History for react-router v3, v4 and react-router-redux

Recently I upgraded react-router from v3 to v4. This meant updating my custom fake I had created for react-router for my isolated unit tests which use an in memory browser history instead of one based on the DOM.

Here's are the differences as a result:

react-router v3


import { createMemoryHistory } from "react-router"
import { syncHistoryWithStore } from 'react-router-redux'

import initStore from '../../components/store'

const store = initStore(),
  browserHistory = createMemoryHistory('/'),
  history = syncHistoryWithStore(browserHistory, store)
  export default { history }

react-router v4

note: v4 uses ConnectedRouter instead of using syncHistoryWithStore.


import { createMemoryHistory } from 'history'

import initStore from '../client/store'

const store = initStore(),
  history = createMemoryHistory('/')

export default { history }



import { React, mount, expect } from './testImports'
import fakes from './fakes'

import App from '../../App'

describe('App', () => {

  it('we can render the app', () => {
    const app = mount(<App history={fakes.history} store={fakes.store({})} />).find(App)
Discover and read more posts from Dave Schinkel
get started
Enjoy this post?

Leave a like and comment for Dave

Be the first to share your opinion

Get curated posts in your inbox

Read more posts to become a better developer