如何在Vitest中测试Laravel Sanctum路由

一、配置axios与测试环境 #

• 确保测试用的axios实例开启withCredentials: true，保证请求自动携带Cookie，同时设置正确的测试服务器baseURL：

  import axios from '@/utils/axios'
  axios.defaults.baseURL = 'http://your-test-server.test'
  axios.defaults.withCredentials = true
  

二、前置获取Sanctum CSRF令牌 #

• 登录前必须先请求/sanctum/csrf-cookie接口，触发服务器返回CSRF令牌Cookie：

  await axios.get('/sanctum/csrf-cookie')
  

三、执行登录并验证Cookie状态 #

• 发送与生产环境一致的登录请求：

  const loginRes = await axios.post('/login', {
    email: 'test-only@example.com',
    password: 'test-password'
  })
  

• 检查响应头的Set-Cookie字段，确认包含laravel_session和XSRF-TOKEN
• 通过document.cookie或js-cookie库读取Cookie，验证是否成功存储

四、解决测试间的状态隔离问题 #

• Vitest默认每个测试用例完全隔离，若要跨用例保持认证状态，需在vitest.config.js中禁用隔离：

  export default defineConfig({
    test: {
      isolate: false
    }
  })
  

• 若不需要跨用例共享状态，就在每个测试用例的beforeEach钩子中重复执行CSRF请求+登录流程

五、修复手动设置Cookie的会话不匹配问题 #

• 手动设置Cookie时，必须同时在请求头中携带解码后的XSRF-TOKEN：

  import Cookies from 'js-cookie'
  const xsrfToken = decodeURIComponent(Cookies.get('XSRF-TOKEN'))
  axios.defaults.headers.common['X-XSRF-TOKEN'] = xsrfToken
  

六、调试与校验 #

• 在关键步骤打印document.cookie，对比浏览器登录后的Cookie，检查是否存在域名/路径不匹配的情况
• 确认Laravel测试服务器的config/sanctum.php中stateful数组包含测试环境的域名

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