javascript - 用玩笑测试 App.tsx 期间的路由问题

Question

我的应用程序运行良好，但我无法通过App.tsx. 我得到了Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Router.Consumer.

当我删除线时<Component ...，测试通过了。当我{...props}从同一行删除时，测试没有通过。你能帮忙解决这个问题吗？

App.tsx：

import * as React from "react";
import {Route, BrowserRouter as Router} from 'react-router-dom';
import routes from "./routes/routes";
import '@styles/styles.global.scss';
import {dark} from "@contexts/Theme/themes/dark";
import {ThemeContext, UserContext} from "@contexts";
import {LocalizationProvider, i18n} from "@l";
import MainLayout from "../layouts/MainLayout/MainLayout";

export default () => {
    return (
        <ThemeContext.Provider value={dark}>
            <LocalizationProvider i18n={i18n}>
                <React.Suspense fallback={<div>Loading... </div>}>
                    <UserContext.Provider value={{}}>
                        <Router>
                            {routes.map(({path, Component, Layout = MainLayout}, key) => {
                                const render = (props: any) => (<Layout {...props}>
                                    <Component data-testid="App.PageComponent" {...props} /> {/* this line */}
                                </Layout>);

                                return <Route exact={true} path={path} key={key} render={render}/>;
                            })}
                        </Router>
                    </UserContext.Provider>
                </React.Suspense>
            </LocalizationProvider>
        </ThemeContext.Provider>
    )
};

完整的错误是：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `Router.Consumer`.

    at createFiberFromTypeAndProps (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:25058:21)
    at createFiberFromElement (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:25086:15)
    at reconcileSingleElement (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:14052:23)
    at reconcileChildFibers (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:14112:35)
    at reconcileChildren (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:16997:28)
    at updateContextProvider (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:18699:3)
    at beginWork (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:19111:14)
    at HTMLUnknownElement.callCallback (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
    at HTMLUnknownElement.callTheUserObjectsOperation (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
    at innerInvokeEventListeners (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:338:25)
    at invokeEventListeners (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
    at HTMLUnknownElementImpl._dispatch (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
    at HTMLUnknownElementImpl.dispatchEvent (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
    at HTMLUnknownElement.dispatchEvent (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
    at Object.invokeGuardedCallbackDev (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
    at invokeGuardedCallback (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
    at beginWork$1 (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
    at performUnitOfWork (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
    at workLoopSync (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
    at renderRootSync (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
    at performSyncWorkOnRoot (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
    at /Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:11327:26
    at unstable_runWithPriority (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/scheduler/cjs/scheduler.development.js:468:12)
    at runWithPriority$1 (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
    at flushSyncCallbackQueueImpl (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:11322:9)
    at flushSyncCallbackQueue (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:11309:3)
    at batchedUpdates$1 (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom.development.js:22387:7)
    at act (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
    at render (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/@testing-library/react/dist/pure.js:97:26)
    at Object.<anonymous> (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/src/components/App/App.test.tsx:14:15)
    at Promise.then.completed (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-circus/build/utils.js:390:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-circus/build/utils.js:315:10)
    at _callCircusTest (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-circus/build/run.js:218:40)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at _runTest (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-circus/build/run.js:155:3)
    at _runTestsForDescribeBlock (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-circus/build/run.js:66:9)
    at _runTestsForDescribeBlock (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-circus/build/run.js:60:9)
    at run (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:167:21)
    at jestAdapter (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:82:19)
    at runTestInternal (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-runner/build/runTest.js:389:16)
    at runTest (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-runner/build/runTest.js:475:34)
    at TestRunner.runTests (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-runner/build/index.js:111:12)
    at TestScheduler.scheduleTests (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/@jest/core/build/TestScheduler.js:333:13)
    at runJest (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/@jest/core/build/runJest.js:401:19)
    at _run10000 (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/@jest/core/build/cli/index.js:320:7)
    at runCLI (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/@jest/core/build/cli/index.js:173:3)
    at Object.run (/Users/macuser/Documents/Google Drive/3. Sources/smsWFE/react/node_modules/jest-cli/build/cli/index.js:155:37)

文件routes.ts仅导出路线列表：

const routes = [
    { path: "/login", name: "", Component: LoginContainer, Layout: AuthLayout },
    { path: "/recover-password", name: "", Component: RecoverPasswordContainer, Layout: AuthLayout },

    { path: "/", name: "", Component: IndexContainer },
    { path: "/dashboard", name: "Dashboard", Component: DashboardContainer },

    // ...

    { path: '/settings', name: "", Component: SettingsPageContainer },
    { path: '/support', name: "", Component: SupportPageContainer },
];

标签： javascriptreactjstypescripttestingjestjs