Reactjs 错误：不变冲突：测试时元素类型无效

档案：

//index.js
从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./containers/App/App.js”导入应用程序；
从'react redux'导入{Provider}；
从“/store”导入{store}；
ReactDOM.render(
(
),
document.getElementById（'root'）| | document.createElement（“div”）
);
//App.js
从“React”导入React，{useffect，useState}；
从“../../firebase/user”导入{getUser}；
从“./Dashboard”导入仪表板；
从“./登录”导入登录；
从“react-redux”导入{useSelector，useDispatch}；
导入“../../style/Global.scss”；
导入“../../styles/App.scss”；
导入“../../style/Transitions.scss”；
导入“../../style/Form.scss”；
导入“../../styles/Icons.scss”；
导入“../../style/Cursors.scss”；
常量应用=（）=>{
const dispatch=usedpatch（）；
const userId=useSelector（{user:{userId}}）=>userId）；
const[content，setContent]=useState（“”）；
useffect（（）=>{dispatch（getUser（））}，[]）；
useffect（（）=>{
如果（用户ID）{
setContent（“仪表板”）；
}else如果（！userId&&userId！==未定义）{
setContent（“登录”）；
}
}，[userId]）
控制台日志（“更新应用程序”）；
常量内容=（）=>{
console.log（“更新应用程序内容”）
if（userId==未定义）{
返回null；
}
如果（用户ID）{
返回；
}否则{
返回；
}
}; 
返回(
{Content（）}
);
};
导出默认应用程序；
//App.test.js
从“React”导入React；
从“酶”中导入{shall}；
从“/App”导入应用程序；
描述（'App'，（）=>{
它（'应该正确呈现'，（）=>{
常量分量=浅（）；
expect（Component.toMatchSnapshot（）；
});
});

完全错误：

第一部分：

不变冲突：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

第二部分（？！）：

警告：React.createElement:类型无效--应为字符串（对于内置组件）或类/函数（对于复合组件），但Get:未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

请在index.js:11检查您的代码

---

我知道在测试时，会有很多关于这个错误的问题，比如jest和Ezyme，以及redux提供者包装等等。。读了很多，但不幸的是没有一本有用。有什么想法吗？

你能在codesandbox上安装一个测试应用程序吗？您是否已检查是否已将

仪表板

或

登录

导出为默认导出？是否可以发布门店代码？

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './containers/App/App.js';
import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.render(
    (
        <Provider store={store}>
            <App />
        </Provider>
    ),
    document.getElementById('root') || document.createElement("div")
);


//App.js

import React, { useEffect, useState } from "react";
import { getUser } from "../../firebase/user";
import Dashboard from "../Dashboard";
import SignIn from "../SignIn";
import { useSelector, useDispatch } from "react-redux";
import "../../styles/Global.scss";
import "../../styles/App.scss";
import "../../styles/Transitions.scss";
import "../../styles/Form.scss";
import "../../styles/Icons.scss";
import "../../styles/Cursors.scss";

const App = () => {

    const dispatch = useDispatch();

    const userId = useSelector(({ user: { userId } }) => userId);

    const [ content, setContent ] = useState("");

    useEffect(() => { dispatch(getUser()) }, []);

    useEffect(() => {
        if (userId) {
            setContent("dashboard");
        } else if (!userId && userId !== undefined) {
            setContent("sign-in");
        }
    }, [userId])

    console.log("Update App");

    const Content = () => {

        console.log("Update App Content")

        if (userId === undefined) {
            return null;
        }
        if (userId) {

            return <Dashboard />;
        } else {

            return <SignIn />;
        }
    }; 

    return (
        <div className={`content-wrapper ${content}`}>
            {Content()}
        </div>
    );
};

export default App;

//App.test.js

import React from "react";
import { shallow } from "enzyme";

import App from "./App";

describe('App', () => {
    it('should render correctly', () => {
        const Component = shallow(<App />);

        expect(Component).toMatchSnapshot();
    });
});