如何在Jest中使用jsdom获取location.href与pathname？

你已经在package.json里配置了testURL，这一步走对了——Jest会基于这个配置自动模拟浏览器环境的location对象。不过你的导入和用法存在一些小问题，我来帮你梳理正确的实现方式：

1. 纠正核心误区：不要直接导入location #

location是浏览器window对象的内置属性，不需要从jsdom包单独导入。Jest在配置testURL后，已经会自动为测试环境注入window对象，你直接访问window.location即可。

如果是特殊场景需要手动初始化jsdom，正确的导入方式应该是：

import { JSDOM } from 'jsdom';

2. 完整测试代码示例 #

假设你的Button组件点击后会修改路径（比如通过直接修改location或路由跳转），下面是可运行的测试代码：

import { shallow } from 'enzyme';
import Button from './Button';

describe('Button component behavior', () => {
  it('navigates to /question when clicked', () => {
    // 重置location状态，避免测试用例间的污染
    delete window.location;
    window.location = new URL('http://localhost:3000/');

    const handleClick = jest.fn();
    const button = shallow(<Button handleClick={handleClick} />);
    
    // 模拟按钮点击
    button.find('button').simulate('click');

    // 断言路径是否正确跳转
    expect(window.location.pathname).toBe('/question');
    
    // 可选：如果handleClick包含跳转逻辑，也可断言函数调用
    expect(handleClick).toHaveBeenCalled();
  });
});

3. 特殊场景：React Router路由跳转 #

如果你的组件是通过react-router的useNavigate或useHistory实现跳转，需要额外模拟路由环境，比如用MemoryRouter包裹组件：

import { MemoryRouter } from 'react-router-dom';
// ...
const button = shallow(
  <MemoryRouter initialEntries={['/']}>
    <Button handleClick={handleClick} />
  </MemoryRouter>
);

4. 确认testURL配置有效性 #

确保你的package.json中Jest配置无误：

{
  "jest": {
    "testURL": "http://localhost:3000/"
  }
}

这个配置会让Jest默认的jsdom环境以该URL作为初始页面地址。

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