How can I test Vue 3 component with Pinia and axios token - axios

Question

I have a component which calls a store called users:
Store:
import { defineStore } from 'pinia'
import axios from 'axios'
export const useUserApiStore = defineStore('userApiStore', {
state: () => ({
}),
actions: {
list(filter) {
const url = import.meta.env.VITE_URL_GLOBALTANK_BASE_API + import.meta.env.VITE_EP_USERS_LIST;
return new Promise((resolve, reject) => {
axios.get(url, {
params: {
filter: filter,
},
}).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
})
},
listPaginated(params) {
const url = import.meta.env.VITE_URL_GLOBALTANK_BASE_API + import.meta.env.VITE_EP_USERS_LIST_PAGINATE;
return new Promise((resolve, reject) => {
axios.get(url, {
params: params,
}).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
})
},
get(id) {
const url = import.meta.env.VITE_URL_GLOBALTANK_BASE_API + import.meta.env.VITE_EP_USERS_SHOW;
return new Promise((resolve, reject) => {
axios.get(url.replace(":id", id)).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
})
},
delete(id) {
const url = import.meta.env.VITE_URL_GLOBALTANK_BASE_API + import.meta.env.VITE_EP_USERS_DELETE;
return new Promise((resolve, reject) => {
axios.delete(url, { params: { id: id } }).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
})
},
/* TABS */
store(params) {
const url = import.meta.env.VITE_URL_GLOBALTANK_BASE_API + import.meta.env.VITE_EP_USERS_STORE;
return new Promise((resolve, reject) => {
axios.post(url, params).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
})
},
update(params) {
const url = import.meta.env.VITE_URL_GLOBALTANK_BASE_API + import.meta.env.VITE_EP_USERS_UPDATE;
return new Promise((resolve, reject) => {
axios.put(url, params).then(res => {
resolve(res)
}).catch(error => {
reject(error)
})
})
}
}
})
My component UsersView has the method onMounted that calls getData from store:
onMounted(() => {
getData();
});
const getData = (numPage = 0) => {
let params = {
paginate: model.paginate,
filter: model.filter,
page: model.current_page,
};
if (numPage > 0) {
params.page = numPage;
model.current_page = numPage;
}
userApiStore
.listPaginated(params)
.then((res) => {
model.data = res.data.data;
console.log("data", model.data);
})
.catch((err) => {
if (err.response.status === 401) console.log("UNAUTHORIZED");
notificationsStore.showToast(t("notifications.unknown_error"), "error");
});
};
And my UsersVew test:
it("should render users list", async () => {
const wrapper = mount(UsersView, {
global: {
plugins: [createTestingPinia({ createSpy: vi.fn, stubActions: false })]
}
})
await flushPromises()
const usersList = wrapper.findAllComponents('[data-test="users-list"]')
console.log(usersList)
})
The problem is that I have a previous login where I get the access_token and I put it globally in axios headers like this:
axios.defaults.headers.common['Authorization'] = Bearer ${res.data.access_token};
But I want to test my component but my component doesn't has the token globally when I throw the tests the list of users is empty
If anyone can help me I would be very grateful