如何在react-testing-library中渲染指定URL并通过useLocation获取？

在React Testing Library测试中尝试渲染指定URL（/user），但组件内通过useLocation().pathname获取到的是空字符串，而非预期的/user。相关代码如下：

原测试代码（add.test.js） #

import {BrowserRouter as Router} from 'react-router-dom'

test('render page with an specific url', () => {
  render(
    test('render input with the value of the token you want to edit', async() => {
        const history = createMemoryHistory({initialEntries:['/user']});
        const { getByText,getAllByRole,getByLabelText } =  render(
        <Router path='/user' history={history} ><Add/></Router>);
        });
      )

原组件代码（app.js） #

console.log('current URL👉️', window.location.href);
const location = useLocation();
console.log('hash', location.hash);
console.log('pathname', location.pathname);// 预期输出/user，实际输出空字符串
console.log('search', location.search);

问题分析 #

1. 测试代码结构错误：嵌套定义test函数，导致测试逻辑执行异常。
2. 路由组件使用不当：
   • React Router v6及以上版本中，BrowserRouter不支持history和path属性，无法通过该组件自定义初始路由。
   • 即使在v5版本中，BrowserRouter也不应该手动传入history，需使用基础的Router组件配合createMemoryHistory。
3. 路由上下文未正确传递：若组件未被Router正确包裹，useLocation无法获取有效路由信息。

修复方案 #

方案一：React Router v6+（推荐）

使用MemoryRouter模拟测试环境的路由，通过initialEntries指定初始路由：

// add.test.js
import { render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import Add from './Add';

test('渲染指定URL的页面', async () => {
  const { getByText, getAllByRole, getByLabelText } = render(
    <MemoryRouter initialEntries={['/user']}>
      <Add />
    </MemoryRouter>
  );

  // 此处添加你的断言逻辑，比如验证路径相关的渲染内容
});

方案二：React Router v5版本

使用Router组件配合createMemoryHistory传递自定义路由历史：

// add.test.js
import { render } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import Add from './Add';

test('渲染指定URL的页面', async () => {
  const history = createMemoryHistory({ initialEntries: ['/user'] });
  const { getByText, getAllByRole, getByLabelText } = render(
    <Router history={history}>
      <Add />
    </Router>
  );

  // 添加断言逻辑
});

额外注意事项 #

• 确保Add组件（或其上层组件）始终被Router组件包裹，否则useLocation会抛出错误或返回空值。
• 测试用例需保持独立，禁止嵌套test函数。
• 测试环境优先使用MemoryRouter，避免依赖真实浏览器的window.location，保证测试的可重复性。

内容的提问来源于stack exchange，提问作者Fabio Schitini