@cypress/react : How to launch a component under a given path / URL?

Question

I have a React component 'Foo' that uses react-router to decide which child to mount.

Let's say this component has 3 submodules: A, B, C.

In a 'normal' cypress test I would use cy.visit('www.test.com/foo/subModuleA') and I would get my site and it would display my Foo-component, which would render the module 'A'.

My component test however mounts this component directly, and cy.visit(...) doesn't work.

cy.visit from a component spec is not allowed see https://github.com/bahmutov/@cypress/react/issues/286

(Sadly this link leads to nowhere)

For the time being I wrote myself a helper-component:

function PathEnforcer (props: React.PropsWithChildren<{ path: string }>) {

  const history = useHistory()
  useEffect(() => {
     history.push(props.path)
  }, [])

  return <>{props.children}</>
}

This simply switches the path as soon as it mounts.

Now I can do something like this in my test:

mount(
    <HashRouter>
      <PathEnforcer path='subModuleA'>
        <Foo />
      </PathEnforcer>
    <HashRouter>
)

And my component is displaying the right module.

This is a workaround that I can work with, but it can hardly be a long term best practice.

How can I configure the tests / execute a command that directly mounts this component given the right path?

Answer 1

I was running into the same issue and this question came up. With react-router v6 this works:

mount (
  <MemoryRouter initialEntries={['/foo']}>
    <Routes>
      <Route path={'/:segment'} element={<YourComponent />}>
    </Routes>
  </MemoryRouter>
)