Despite conducting extensive research, I have been unable to find a concrete example that helps me understand this issue.
What I am aiming for is to mock the API and test if it is rendering correctly.
If someone could provide me with a code example using Jest specifically, it would greatly assist me in applying this knowledge to all other functions within my project. I am struggling to comprehend how to do this.
Thank you for your assistance.
REAL API from api folder
export const searchTrack = search => {
return fetch(
`${url}/search/tracks?q=${encodeURIComponent(
search
)}&limit=250&media=music`,
{
method: "GET",
headers: {
Authorization: Cookies.get("token")
}
}
)
.then(response => {
return response.json();
})
.then(jsonFormat => {
return jsonFormat.results;
})
.catch(() => {
console.error("fetch for search dont work");
});
};
addTracksPlaylist.vue method called
methods: {
search() {
if (this.term !== "") {
this.results = [];
this.searching = true;
apiPlaylist
.searchTrack(this.term)
.then(res => {
if (res.status != 401) {
this.searching = false;
this.results = res;
this.noResults = this.results.length === 0;
}
})
.catch(() => {
this.$router.push("/login");
});
}
}
}
I noticed that many people were creating a __mocks__ folder in the api directory, so I followed suit and created one with the appropriate API GET return values:
{
wrapperType: "track",
kind: "song",
artistId: 461932,
collectionId: 196480323,
trackId: 196480329,
artistName: "Europe",
collectionName: "The Final Countdown",
trackName: "The Final Countdown",
collectionCensoredName: "The Final Countdown",
trackCensoredName: "The Final Countdown",
// More fields and values here...
}