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

fakes.js

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

import initStore from '../../components/store'
require('./jsdom')

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

react-router v4

note: v4 uses ConnectedRouter instead of using syncHistoryWithStore.

fakes.js

import { createMemoryHistory } from 'history'
require('./jsdom')

import initStore from '../client/store'

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

export default { history }

Usage

app.spec.js

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)
    expect(app).to.exist
  })
})