Testing with Jest: Tip #6

App-test.jsx

import renderer from 'react-test-renderer'
import App from '../App'

jest.mock('react-router-dom', () => ({
  Link: 'Link',
  Route: ({ children, ...props }) =>
    typeof children === 'function'
      ? children({ match: path === '/somewhere' })
      : createElement('Route', props)
}))

it('should render correctly', () => {
  const component = renderer.create(<App />)
  expect(component.toJSON()).toMatchSnapshot()
})

App.jsx

import { Route, Link } from 'react-router-dom'
import Somewhere from './Somewhere'
import SomewhereElse from './SomewhereElse'

const SidebarLink = ({ to, ...rest }) =>
  <Route path={to}>
    {({ match }) =>
      <li className={match ? 'active' : ''}>
        <Link to={to} {...rest} />
      </li>}
  </Route>

export default () =>
  <div>
    <ul>
      <SidebarLink to="/somewhere" />
      <SidebarLink to="/somewhere-else" />
    </ul>
    <Route path="/somewhere" component={Somewhere} />
    <Route path="/somewhere-else" component={SomewhereElse} />
  </div>