我正在尝试测试用户单击按钮后是否增加了类似计数器。我正在使用react测试库,其中我找到了一个按钮并执行userEvent.click
,这应该在后台调度一个操作并增加计数器,然后我可以Assert新值。
当我手动通过用户界面但无法使测试工作时,这是有效的。
按钮:
<Button
size="small"
color="primary"
onClick={() => dispatch(likePosts(post._id))}
>
<ThumbUpIcon fontSize="small" />
Like {`${post.likeCount}`}
{}
</Button>
Thunk操作:
export const likePosts = (id) => async (dispatch) => {
try {
const { data } = await api.likePost(id);
dispatch({ type: LIKE, payload: data });
} catch (error) {
console.log(error);
}
我还设置了一个test-util来帮助我测试连接组件TEST UTIL LINK我还添加了applyMiddleware(thunk)
来支持连接组件时的thunk
测试效用:
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 };
我的测试:
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);
});
});
测试错误:
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name `/Like 1/i`
这意味着在测试中单击then按钮时没有调度该操作。
更新:
该按钮来自MUI库:
import { Button } from "@material-ui/core";
post prop从其父组件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;
此外,当使用UI时,所有这些工作都很好,它只是在React测试库中测试按钮onClick似乎不发送likePosts
1条答案
按热度按时间mwg9r5ms1#
你试过
redux-mock-store
吗?