Как я могу проверить Lazy загруженный компонент, используя Jest + энзим - PullRequest
0 голосов
/ 21 марта 2020

В своем приложении реакции я реализовал отложенную загрузку, используя 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.spe c .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}
...