如何解决Vue.js运行测试用例时出现localStorage is not defined报错

测试运行在Node环境下，默认没有浏览器提供的localStorage全局API。你在axios.js模块顶层直接执行了localStorage.getItem('token')逻辑，只要单元测试导入了依赖该文件的组件，就会在模块加载阶段直接抛出未定义错误。

可以选择以下任意一种方式解决，推荐优先选择第二种优化业务代码的方案：

方案1：测试环境Mock localStorage #

直接在单元测试文件顶部添加mock代码即可：
如果使用Jest作为测试框架：

// Login.spec.js 顶部添加
global.localStorage = {
  getItem: jest.fn(() => null), // 可根据测试需要自定义返回的token值
  setItem: jest.fn(),
  removeItem: jest.fn(),
  clear: jest.fn()
}

如果使用Vitest作为测试框架，将jest.fn替换为vi.fn即可。
如果需要所有测试用例都生效，可以把这段代码写到测试框架的全局启动配置文件中。

方案2：优化axios Authorization头设置逻辑（推荐） #

你当前把token获取逻辑写在模块顶层，除了测试报错之外，还存在两个业务问题：

• 模块加载时只会获取一次token，后续用户登录刷新token后，请求头不会自动更新
• Bearer后面缺少空格，会导致后端解析token出错
  修改为使用请求拦截器实现，每次请求前动态获取token：

// 修改后的axios.js
import axios from 'axios'

axios.defaults.baseURL=process.env.VUE_APP_AXIOS_URL

// 添加请求拦截器，每次请求都动态获取最新token
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.common['Authorization'] = 'Bearer ' + token;
  }
  return config;
}, error => Promise.reject(error))

export default class AxiosService{
   postData(url,data){
       return axios.post(url,data).then(response =>{
           return response;
       }).catch(error=>{
           return error;
       })
   }
}

方案3：修改测试运行环境 #

检查你的测试配置，将测试运行环境设置为jsdom（模拟浏览器环境，自带localStorage实现）：

• Jest：在jest.config.js中添加配置 testEnvironment: 'jsdom'
• Vitest：在vite.config.js的test配置中添加 environment: 'jsdom'

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