Mock模块时如何将Next/Link的href属性传递给React Router Link的to属性

直接替换组件的方式没法自动映射href到to，因为两个组件的属性名不一致。你需要写一个包装组件来做属性转换：

vi.mock('next/link', async () => {
  const { Link: RouterLink } = await vi.importActual('react-router-dom');
  
  const NextLinkMock = (props) => {
    // 提取href属性，将其映射为React Router Link的to属性
    const { href, ...rest } = props;
    return <RouterLink to={href} {...rest} />;
  };

  return { default: NextLinkMock };
});

这个Mock组件会接收原Next.js Link的所有属性，把href转成React Router需要的to，同时保留其他属性（比如样式、点击事件等）的传递。如果原组件还有其他Next.js特有的属性（比如passHref），你可以根据测试需求在组件里添加过滤或处理逻辑。

内容的提问来源于stack exchange，提问作者Ealdjkflsa aCkad