我正在尝试对仪表板组件中onSubmit方法内的react hook函数进行单元测试,但是我收到此错误
●应该测试组件›应该测试onSubmit函数
expect(jest.fn()).toHaveBeenCalledWith(...expected) Expected: undefined Received 1: {"payload": {"ourPostContent": [], "ourTitle": []}, "type": "CREATE_POST_INIT"} 2: {"type": "INIT_NOTIFICATION"} 3: {"payload": {"ourPostContent": [], "ourTitle": []}, "type": "CREATE_POST_INIT"}
我在做什么错了?
dashboard.test.tsx
import React from "react";
import { DashboardComponent as Dashboard } from "./dashboard";
import { renderHook, act } from "@testing-library/react-hooks";
import { shallow, mount, render } from "enzyme";
import PostForm from "../../components/forms/createPost/createPost";
import { Provider } from "react-redux";
import { store } from "../../store";
import storeHooks from "../../common/storeHooks";
import * as ReactRedux from "react-redux";
import { Action } from "redux";
describe("Should test <Dashboard/> component", () => {
let wrapper;
// let useEffect;
// const mockUseEffect = () => {
// useEffect.mockImplementationOnce((f) => f());
// };
const mockDispatch = jest.fn();
const mockSelector = jest.fn();
beforeEach(() => {
// useEffect = jest.spyOn(React, "useEffect");
// mockUseEffect();
ReactRedux.useDispatch = jest.fn().mockImplementation(() => mockDispatch);
ReactRedux.useSelector = jest.fn().mockImplementation(() => []);
wrapper = mount(
<Provider store={store}>
<Dashboard />
</Provider>,
);
});
beforeEach(() => {
// clear the mocks to refresh their calls info
ReactRedux.useDispatch.mockClear();
mockDispatch.mockClear();
});
it("Should test onSubmit function", () => {
wrapper
.find(PostForm)
.props()
.onSubmit({
preventDefault() {},
});
const { result } = renderHook(() => storeHooks().createPost);
const data = {
title: "owls are cool",
content: "im a goat and a fish",
};
console.log(data);
expect(wrapper.find("PostForm").simulate("submit", { preventDefault() {} }));
expect(mockDispatch).toHaveBeenCalledWith(result.current(data)); // this issues is caused by this line
});
});
仪表板
import React, { Fragment } from "react";
import PostForm from "../forms/createPost/createPost";
import GridHoc from "../hoc/grid";
import OurTabs from "../tabs/OurTabs";
import useInputChange from "../../common/handleHook";
import Grid from "@material-ui/core/Grid";
import { useDispatch } from "react-redux";
import { addTitle, addContent } from "../../actions/postActions";
import OurError from "../../common/OurError";
import storeMethods from "../../common/storeHooks";
function Dashboard(props: any) {
const dispatch = useDispatch();
const inputData = {
addTitle: (data: string) => dispatch(addTitle(data)),
addContent: (data: string) => dispatch(addContent(data)),
};
const handleInputChange = useInputChange(inputData);
const ourTitle = storeMethods().ourTitle;
const titleError = storeMethods().titleError;
const ourBodyError = storeMethods().ourBodyError;
const ourPostContent = storeMethods().ourPostContent;
const { createPost } = storeMethods();
const onSubmit = (e: any) => {
e.preventDefault();
const postData = { ourTitle, ourPostContent };
console.log(postData);
createPost(postData);
};
const isEnabled = titleError === true && ourBodyError === true ? false : true;
return (
<Fragment>
<Grid justify="center" container={true}>
<Grid item={true} lg={9} xs={11}>
{storeMethods().errPost && <OurError />}
<PostForm
title={ourTitle}
postContent={ourPostContent}
handleTitleChange={handleInputChange}
handleContentChange={handleInputChange}
onSubmit={onSubmit}
disButton={isEnabled}
titleError={titleError}
bodyError={ourBodyError}
/>
</Grid>
</Grid>
<br />
<OurTabs />
</Fragment>
);
}
export default GridHoc(Dashboard);
// will be useful for unit testing.
export { Dashboard as DashboardComponent };