Render test suites

cRR-render.test.js

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import React from 'react'
import { Route, Switch } from 'react-router'
import { Provider } from 'react-redux'
import { createStore, combineReducers, applyMiddleware, compose } from "redux"
import { combineReducers as combineReducersImmutable } from 'redux-immutable'
import { createBrowserHistory } from 'history'
import createConnectedRouter from '../src/ConnectedRouter'
import { connectRouter, routerMiddleware, push } from '../src'
import {
  connectRouter as connectRouterImmutable,
  routerMiddleware as routerMiddlewareImmutable,
} from '../src/immutable'
import plainStructure from '../src/structure/plain'
import immutableStructure from '../src/structure/immutable'


Enzyme.configure({ adapter: new Adapter() })

const { mount } = Enzyme

describe('render test', () => {
  let store
  let history
  let reducer
  const TEST_ACTION = 'test-action'
  const otherReducer = (state = 0, { type }) => {
    switch (type) {
      case TEST_ACTION: return ++state
      default: return state
    }
  }

  beforeEach(() => {
    history = createBrowserHistory()
  })

  describe('with plain structure', () => {
    let ConnectedRouter

    beforeEach(() => {
      ConnectedRouter = createConnectedRouter(plainStructure)
      reducer = combineReducers({
        other: otherReducer,
        router: connectRouter(history)
      })
      store = createStore(
        reducer,
        compose(applyMiddleware(routerMiddleware(history)))
      )
    })

    it('render once on initiation', () => {
      let renderCount = 0
      const RenderCounter = () => {
        renderCount++
        return null
      }
      mount(
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <Switch>
              <Route path="/" component={RenderCounter} />
            </Switch>
          </ConnectedRouter>
        </Provider>
      )
      expect(renderCount).toBe(1)
    })

    it('does not render again when non-related action is fired', () => {
      let renderCount = 0
      const RenderCounter = () => {
        renderCount++
        return null
      }
      mount(
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <Route path="/" component={RenderCounter} />
          </ConnectedRouter>
        </Provider>
      )
      store.dispatch({ type: TEST_ACTION })
      store.dispatch(push('/new-location'))
      expect(renderCount).toBe(2)
    })
  })

  describe('with immutable structure', () => {
    let ConnectedRouter

    beforeEach(() => {
      ConnectedRouter = createConnectedRouter(immutableStructure)
      reducer = combineReducersImmutable({
        other: otherReducer,
        router: connectRouterImmutable(history)
      })
      store = createStore(
        reducer,
        compose(applyMiddleware(routerMiddlewareImmutable(history)))
      )
    })

    it('render once on initiation', () => {
      let renderCount = 0
      const RenderCounter = () => {
        renderCount++
        return null
      }
      mount(
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <Switch>
              <Route path="/" component={RenderCounter} />
            </Switch>
          </ConnectedRouter>
        </Provider>
      )
      expect(renderCount).toBe(1)
    })

    it('does not render again when non-related action is fired', () => {
      let renderCount = 0
      const RenderCounter = () => {
        renderCount++
        return null
      }
      mount(
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <Route path="/" component={RenderCounter} />
          </ConnectedRouter>
        </Provider>
      )
      store.dispatch({ type: TEST_ACTION })
      store.dispatch(push('/new-location'))
      expect(renderCount).toBe(2)
    })
  })
})