酶未在onSubmit方法中测试redux功能

时间:2020-05-20 15:24:00

标签: reactjs redux enzyme

我正在尝试对仪表板组件中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 };

0 个答案:

没有答案