react testing library Redux with thunk testing, action not being dispatched - reactjs

Question

i am trying to test if a like counter has been increased after user clicks a button. I am using react testing library where i find a button and preform userEvent.click this should dispatch an action behind the scenes and increment the counter where i can then assert the new value.
This works when i manually go through the ui but cannot get the test to work.
Button:
<Button
size="small"
color="primary"
onClick={() => dispatch(likePosts(post._id))}
>
<ThumbUpIcon fontSize="small" />
Like {`${post.likeCount}`}
{}
</Button>
Thunk action:
export const likePosts = (id) => async (dispatch) => {
try {
const { data } = await api.likePost(id);
dispatch({ type: LIKE, payload: data });
} catch (error) {
console.log(error);
}
I have also set up a test-util to help me test connected component TEST UTIL LINK
I have also added applyMiddleware(thunk) to support thunk when a for a connected component
test-util:
import React from "react";
import { render as rtlRender } from "#testing-library/react";
import { legacy_createStore, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
// Replace this with the appropriate imports for your project
import reducers from "../redux/reducers";
const render = (
ui,
{
store = legacy_createStore(reducers, applyMiddleware(thunk)),
...renderOptions
} = {}
) => {
const Wrapper = ({ children }) => (
<Provider store={store}>{children}</Provider>
);
return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
};
export * from "#testing-library/react";
export * from "#testing-library/jest-dom";
// override render method
export { render };
My Test:
import Post from "./Post";
import { render, screen } from "../../../utils/test-utils";
import userEvent from "#testing-library/user-event";
describe("Post", () => {
let initialState;
beforeEach(() => {
initialState = {
_id: "1234",
title: "post title",
message: "post message",
creator: "post creator",
tags: ["postTag", "postTag"],
selectedFile: "path/to/file",
likeCount: 0,
createdAt: "2022-07-20T23:54:25.251Z",
};
});
test("should increment post likes when like button clicked", () => {
render(<Post post={initialState} />, { initialState });
const postLikeButton = screen.getByRole("button", { name: /Like/i });
userEvent.click(postLikeButton);
const clickedPostLikeButton = screen.getByRole("button", {
name: /Like 1/i,
}).textContent;
// expect().toHaveBeenCalled();
expect(clickedPostLikeButton).toBe(100);
});
});
Test error:
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/Like 1/i`
That would suggest that the the action was not dispatched when then button was clicked in the test.
UPDATE:
The button is from MUI library:
import { Button } from "#material-ui/core";
The post prop is passed from its parent component Posts:
import React from "react";
import { useSelector } from "react-redux";
import { Grid, CircularProgress } from "#material-ui/core";
import Post from "./Post/Post";
import useStyles from "./styles";
const Posts = ({ setCurrentId }) => {
const posts = useSelector((state) => state.posts);
const classes = useStyles();
return !posts.length ? (
<CircularProgress />
) : (
<Grid
className={classes.container}
container
alignItems="stretch"
spacing={3}
>
{posts.map((post, index) => (
<Grid key={index} item xs={12} sm={6}>
<Post key={post.id} post={post} setCurrentId={setCurrentId} />
</Grid>
))}
</Grid>
);
};
export default Posts;
Also all of this works just fine when using the UI, its just in react testing library test the button onClick seems the not to dispatch likePosts

Answer 1

Did you try with redux-mock-store?
import configureStore from 'redux-mock-store'
const mockStore = configureStore()
const store = mockStore(reducers) // add your reducers here
// ...
render(
<Provider store={store}>
{children}
</Provider>
)