So I am trying to complete the Reddit Client React Redux project and have questions with testing. I am currently trying to run a test on the API fetch for reddit and I keep getting the error:
expect(received).toEqual(expected) // deep equality
Expected: {"data": {"children": [{"data": {"author": "author", "created_utc": "2022", "id": "author image", "num_comments": "200", "post_hint": "Media Type", "subreddit_name_prefixed": "subreddit", "title": "title", "ups": "100", "url_overridden_by_dest": "url"}}]}}
Received: [Function anonymous]
Here is my test file:
import React from 'react';
import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
import redditsReducer, { loadReddits } from "./redditsSlice";
import redditApi from '../../api/reddit-api';
jest.mock('../../api/reddit-api');
describe("<Reddits />", () => {
it("Gets the Popular posts from Reddit API", async () => {
const topic = "popular";
const expectedValue = {
data: {
children: [
{
data: {
id: "id",
subreddit_name_prefixed: "subreddit",
title: "title",
post_hint: "Media Type",
url_overridden_by_dest: "url",
author: "author",
id: "author image",
ups: "100",
created_utc: "2022",
num_comments: "200"
}
}
]
}
};
const mockResponse = {
data: {
children: [
{
data: {
id: "id",
subreddit_name_prefixed: "subreddit",
title: "title",
post_hint: "Media Type",
url_overridden_by_dest: "url",
author: "author",
id: "author image",
ups: "100",
created_utc: "2022",
num_comments: "200"
}
}
]
}
}
redditApi.mockResolvedValue(mockResponse);
const actualValue = await loadReddits(topic);
expect(actualValue).toEqual(expectedValue);
});
});
My mock file:
const redditApi = jest.fn(() => {
return Promise.resolve({
data: {
children: []
}
});
});
export default redditApi;
My api call file:
const redditApi = async(topic) => {
const response = await fetch(`https://www.reddit.com/r/${topic}.json`);
const json = await response.json();
return json;
};
export default redditApi;
and my slice file:
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import redditApi from '../../api/reddit-api';
//Run API call to load Reddits
export const loadReddits = createAsyncThunk('reddits/loadReddits', async (topic) => {
const response = await redditApi(topic);
return response;
});
const redditsSlice = createSlice({
name: 'reddits',
initialState: {
reddits: [],
avatars: [],
isLoadingReddits: false,
failedToLoadReddits: false
},
reducers: {},
extraReducers: builder => {
builder
//loading reddits
.addCase(loadReddits.pending, (state) => {
state.isLoadingReddits = true;
state.failedToLoadReddits = false;
})
.addCase(loadReddits.fulfilled, (state, action) => {
state.isLoadingReddits = false;
state.failedToLoadReddits = false;
state.reddits = action.payload.data.children.map((reddit) => {
const postData = {
id: reddit.data.id,
subreddit: reddit.data.subreddit_name_prefixed,
title: reddit.data.title,
mediaType: reddit.data.post_hint,
media: reddit.data.url_overridden_by_dest,
author: reddit.data.author,
authorImage: reddit.data.id,
upvotes: reddit.data.ups,
postedOn: reddit.data.created_utc,
numberOfComments: reddit.data.num_comments
}
return postData;
});
})
.addCase(loadReddits.rejected, (state) => {
state.isLoadingReddits = false;
state.failedToLoadReddits = true;
state.reddits = [];
})
}
});
export const selectReddits = (state) => state.reddits.reddits;
export const selectIsLoading = (state) => state.reddits.isLoadingReddits;
export default redditsSlice.reducer;
I’m not sure what I’m doing wrong and have found absolutely nothing anywhere else. Any help would be greatly appreciated.