使用useRouteMatch和Route开玩笑地进行浅层测试

时间:2020-04-27 10:13:31

标签: jestjs react-hooks enzyme react-router-dom

我在测试中测试React Router useRouteMatch时遇到问题。我正在使用Jest Shallow和Enzyme。 每次我收到此错误

 Error: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s

这是我精简的非常简单的组件。我也尝试过使用react-router-dom

import React from "react";
import { Route } from "react-router-dom";
import { useRouteMatch } from "react-router";

import { AddFieldModal } from "Modals/AddFieldModal";

const Forms = () => {
    const match = useRouteMatch();
    return (
        <Route
            path={`${match.url}/newField`}
            render={() => <AddFieldModal />}
        />
    );
};

export { Forms };

它非常简单并且有效。这是我的考验

import React from "react";
import toJson from "enzyme-to-json";
import { shallow } from "enzyme";

import { Forms } from "../index";


jest.mock("react-router", () => ({
    useRouteMatch: () => ({ url: "testUrl" }),
}));

describe("<Forms />", () => {
    it("should render", () => {
        const wrapper = shallow(<Forms />);
        expect(toJson(wrapper)).toMatchSnapshot();
    });
});

反应版本:16.12.0 路由器版本:5.1.2

有什么想法吗? 谢谢

编辑:添加导入和版本

0 个答案:

没有答案