Testing with Jest: Tip #5

Sidebar-test.jsx

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

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

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

Sidebar.jsx

import { Route, Link } from 'react-router-dom'

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

export default () =>
  <ul>
    <SidebarLink to="/somewhere" />
    <SidebarLink to="/somewhere-else" />
  </ul>

Found this very helpful, thanks.