使用createMemoryRouter创建路由报错：无法解构null的'basename'属性

在使用React Router v7.2.0结合Vitest测试购物车页面时，通过createMemoryRouter创建路由并使用RouterProvider渲染，出现以下错误，导致测试无法正常渲染目标页面：

报错信息 #

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

测试代码 #

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()
  })
})

路由配置 #

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": {
        "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"
    }

解决方案 #

1. 配置Vitest测试环境 #

在vitest.config.js中明确设置测试环境为jsdom，确保React组件测试有正确的DOM环境：

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    globals: true,
  },
})

2. 升级@testing-library/react版本 #

当前使用的@testing-library/react@16.2.0对React 19的支持可能存在兼容问题，升级到最新版本：

npm install @testing-library/react@latest

3. 改用MemoryRouter测试（备选） #

如果上述方法无效，尝试用MemoryRouter直接包裹根组件进行测试：

import { vi, describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'
import { MemoryRouter } from 'react-router-dom'
import App from '../../App'

describe('Cart Page', () => {
  it('Cart Page Link', async () => {
    const { getByRole } = render(
      <MemoryRouter initialEntries={['/cart-page']}>
        <App />
      </MemoryRouter>
    )

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

内容的提问来源于stack exchange，提问作者vatsal chauhan