@navinc/base-react-components/src/tests/with-app-context.js

Nav's Pattern Library

import { ThemeProvider } from 'styled-components'
import { MemoryRouter, Route, Switch } from 'react-router-dom'
import { render } from '@testing-library/react'
import { theme } from '../theme.js'
import { ToastProvider } from '../toast-hook.js'

export const withAppContext = (ComponentIn) => (props) => (
  <ThemeProvider theme={theme}>
    <ComponentIn {...props} />
  </ThemeProvider>
)

export const renderWithContext = (ui, options = {}) => {
  let routeProps
  const getRouteProps = () => routeProps
  const { initialEntries = ['/'] } = options
  const Context = ({ children }) => (
    <ToastProvider>
      <ThemeProvider theme={theme}>
        <MemoryRouter initialEntries={initialEntries}>
          <Switch>
            <Route
              path={new URL(initialEntries[initialEntries.length - 1], 'http://local').pathname}
              render={(props) => {
                routeProps = props
                return children
              }}
            />
            <Route
              render={(props) => {
                routeProps = props
                return null
              }}
            />
          </Switch>
        </MemoryRouter>
      </ThemeProvider>
    </ToastProvider>
  )

  const view = render(ui, { wrapper: Context, ...options })
  return {
    ...view,
    getRouteProps,
  }
}