Testing

@nano_kit/router is designed to be easily testable by decoupling navigation logic from the browser’s History API.

For testing environments (unit tests, integration tests) or isolated environments (Storybook), use virtualNavigation instead of browserNavigation.

virtualNavigation creates an in-memory history stack that behaves exactly like the browser router but without touching the window URL.

Provide the global Location$ and Navigation$ tokens — exported directly from @nano_kit/router — with virtual instances to isolate routing in tests:

import { render, screen } from '@testing-library/react'
import { InjectionContext, provide } from '@nano_kit/store'
import { InjectionContextProvider } from '@nano_kit/react'
import { virtualNavigation, Location$, Navigation$ } from '@nano_kit/router'
import { routes } from './routes'
import { App } from './App'

it('should render the admin page', async () => {
  /* Create virtual navigation for the test */
  const [$location, navigation] = virtualNavigation('/admin', routes)

  /* Override tokens with virtual instances */
  const context = new InjectionContext([
    provide(Location$, $location),
    provide(Navigation$, navigation)
  ])

  render(
    <InjectionContextProvider context={context}>
      <App />
    </InjectionContextProvider>
  )

  expect(screen.getByText('Admin Panel')).toBeInTheDocument()
})

Testing

Virtual Navigation