Component Testing (+ React 18) Mount via URL

ct-open-by-url.tsx

import ReactDOM from 'react-dom/client'
import { MemoryRouter } from 'react-router-dom'

import { mount } from '@cypress/react'

import Application from '../Application' // NOTE: Your main component

export const open = (path: string) => {
	let myRoot: ReactDOM.Root
	mount(<div />, {
		ReactDom: {
			// @ts-ignore ignore return type
			render: (_: any, rootEl: Element | null) => {
				const root = ReactDOM.createRoot(rootEl!)
				myRoot = root
				root.render(
					<MemoryRouter initialEntries={[path]}>
						<Application />
					</MemoryRouter>,
				)
			},
			unmountComponentAtNode: () => {
				// NOTE: Clear client-store & localStorage here to prevent side-effect to next testing
				myRoot.unmount()
				return true
			},
		},
	})
}

On test file

import { open } from './ct-open-by-url'
describe('Home', () => {
	it('Simple', () => {
		open('/')
	})
})

pkg:

react: 18.1.0
react-router-dom: 6.3.0
@cypress/react: 5.12.4