javascriptreactjstestingreact-routervitest

createMemoryRouter throws TypeError: Cannot destructure property 'basename' of 'React10.useContext(...)' as it is null

Using createMemoryRouter to create router to render doesn't work. It renders and error page.

import { vi, describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'
import { userEvent } from '@testing-library/user-event'
import { routes } from '../../routes.jsx'
import {
  RouterProvider,
  createMemoryRouter,
  MemoryRouter,
  BrowserRouter,
} from 'react-router-dom'



describe('Cart Page', () => {
  it('Cart Page Link', async () => {
    const router = createMemoryRouter(routes, {
      initialEntries: ['/cart-page'],
    })
    const { findAllByTitle, getByRole, debug } = render(
      <RouterProvider router={router} />
    )

    expect(getByRole('heading', { name: /cart page/i })).toBeInTheDocument()
  })
})

error

TypeError: Cannot destructure property 'basename' of 'React10.useContext(...)' as it is null.

routes

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

const CartPage = () => {
  return <h1>Cart Page</h1>
}

const App = () => {
  return 
         (<>
            <h1>App</h1>
            <Link to='cart-page'>Cart Page</Link>
            <Outlet />
         (</>

}

const routes = [
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: 'cart-page',
        element: <CartPage />,
      },
    ],
  },
]

export { routes }

dependencies

    "dependencies": {
        "lucide-react": "^0.475.0",
        "prop-types": "^15.8.1",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-router-dom": "^7.2.0"
    },
    "devDependencies": {
        "@eslint/js": "^9.19.0",
        "@testing-library/jest-dom": "^6.6.3",
        "@testing-library/react": "^16.2.0",
        "@testing-library/user-event": "^14.6.1",
        "@types/react": "^19.0.8",
        "@types/react-dom": "^19.0.3",
        "@vitejs/plugin-react": "^4.3.4",
        "eslint": "^9.19.0",
        "eslint-plugin-react": "^7.37.4",
        "eslint-plugin-react-hooks": "^5.0.0",
        "eslint-plugin-react-refresh": "^0.4.18",
        "globals": "^15.14.0",
        "jsdom": "^26.0.0",
        "sass": "^1.85.0",
        "sass-loader": "^16.0.5",
        "stylelint-config-sass-guidelines": "^12.1.0",
        "vite": "^6.1.0",
        "vitest": "^3.0.6"
    }
Solution

  • Issue

    It seems the issue you have is caused by using React-Router-DOM version 7 which significantly changed its internal code structure and organization. The main problem is that RouterProvider is not exported by react-router-dom, and is instead exported by the root react-router library. This means the router isn't not correctly instantiated.

    Solution Suggestion

    You should install and import the React-Router components from react-router now.

    1. (If necessary) completely uninstall any current installed versions of react-router-dom:

      npm uninstall -S react-router-dom

    2. Install react-router@7 for your UI, and react-router-dom@7 for react-bootstrap dependency:

      npm install -S react-router@latest react-router-dom@latest

    3. Import from react-router:

      import { vi, describe, it, expect } from 'vitest';
import { render } from '@testing-library/react';
import { userEvent } from '@testing-library/user-event';
import {
  RouterProvider,
  createMemoryRouter,
} from 'react-router'; // <--
import { routes } from '../../routes.jsx';

describe('Cart Page', () => {
  it('Cart Page Link', () => {
    const router = createMemoryRouter(routes, {
      initialEntries: ['/cart-page'],
    })
    const { findAllByTitle, getByRole, debug } = render(
      <RouterProvider router={router} />
    )

    expect(getByRole('heading', { name: /cart page/i })).toBeInTheDocument()
  })
})

      import { Outlet, Link } from 'react-router'; // <--

const CartPage = () => {
  return <h1>Cart Page</h1>
}

const App = () => {
  return (
    <>
      <h1>App</h1>
      <Link to='cart-page'>Cart Page</Link>
      <Outlet />
    </>
  );
}

const routes = [
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: 'cart-page',
        element: <CartPage />,
      },
    ],
  },
]

export { routes };

    For specific details on migrating/upgrading from React-Router v6 to v7 see: