Svelte Kit中使用Testing Library无法识别href值的问题

以下是几种常见的原因及解决思路：

• Svelte Kit路由路径自动转换
  Svelte Kit在渲染时会将相对路径的href转换为完整的绝对URL（比如开发环境下会变成http://localhost:5173/services），直接断言等于/services自然失败。你可以先打印元素的实际href值确认：

  const link = screen.getByRole('link', { name: 'Services' });
  console.log(link.href); // 查看实际渲染的路径
  

  解决方式：通过URL对象提取路径部分再断言：

  expect(new URL(link.href).pathname).toBe('/services');
  

• 匹配到多个同名链接
  页面中可能存在多个文本为"Services"的链接，你获取到的元素并非目标那个。可以用精确匹配或结合上下文定位：

  // 精确匹配文本
  const link = screen.getByRole('link', { name: 'Services', exact: true });
  // 或结合父元素定位
  const nav = screen.getByRole('navigation');
  const link = within(nav).getByRole('link', { name: 'Services' });
  

• 动态href绑定的环境差异
  如果链接的href是通过Svelte store（比如$page）动态生成的，测试环境中store的值可能和预期不符。比如组件中写了href={$page.url.origin + '/services'}，测试时需要模拟page store的正确值：

  import { page } from '$app/stores';
  import { mock } from 'vitest';
  
  mock(page, () => ({
    url: new URL('http://localhost:5173')
  }));
  

• 项目base路径配置影响
  如果svelte.config.js中配置了kit.paths.base（比如/my-app），渲染后的href会带上这个前缀（变成/my-app/services）。此时断言需要对应加上base路径，或者在测试环境中同步配置base参数。

内容的提问来源于stack exchange，提问作者3therk1ll