5

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

没有React.lazy(() => import("..."))我的测试用例工作正常，但只有React.lazy它不起作用。

请在这方面提供帮助。

验证.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}
4

0 回答 0