如何使用玩笑+酶测试延迟加载的组件

Question

在我的react应用程序中，我已经使用React.lazy(() => import("..."))实现了延迟加载。但是我无法实现支持延迟加载的测试用例。

在没有React.lazy(() => import("..."))的情况下，我的测试用例工作正常，但仅在React.lazy下，我的测试用例无法正常工作。

请提供帮助。

auth.jsx

import React, { Suspense } from "react";
import { Switch, Route } from "react-router-dom";

const SignIn = React.lazy(() => import("../../components/SignIn/SignIn"));

const Authentication = props => {
    return (
        <div id="wrapper" className="bg-gradient-primary">
            <Suspense fallback={<div>Loading...</div>}>
                <Switch>
                    <Route path="/sign-in" component={SignIn} />
                </Switch>
            </Suspense>
        </div>
    );
};

export default Authentication;

这是我的测试代码。

auth.spec.jsx

import React from "react";
import { shallow } from "enzyme";
import Authentication from "./Authentication";
import SignIn from "../../components/SignIn/SignIn";

describe("Authentication", () => {
    let component;
    beforeEach(() => {
        component = shallow(<Authentication />);
    });
    it("should render", () => {
        expect(component.find("#wrapper")).toHaveLength(1);
    });

    it('should render "SignIn"', () => {
        const routeEl = component.find('Route[path="/sign-in"]');
        expect(routeEl.first().prop("component")).toBe(SignIn);
    });

});

运行测试用例时，出现以下错误

 expect(received).toBe(expected) // Object.is equality

 Expected: [Function SignIn]
 Received: {"$$typeof": Symbol(react.lazy), "_ctor": [Function anonymous], "_result": null, "_status": -1}