【发布时间】：2023-03-04 14:33:01
【问题描述】：
我正在尝试使用 Enzyme 在 create-react-app 应用程序中测试 React UI 组件。我有一个使用 mount 的基本测试组件。这表明（至少对我而言）我正确设置了酶及其依赖项。
每当我尝试在我的一个更复杂的组件上运行测试时，我都会收到如下错误：
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at invariant (node_modules/react-dom/cjs/react-dom.development.js:55:15)
at createFiberFromTypeAndProps (node_modules/react-dom/cjs/react-dom.development.js:9958:11)
at createFiberFromElement (node_modules/react-dom/cjs/react-dom.development.js:9979:15)
at reconcileSingleElement (node_modules/react-dom/cjs/react-dom.development.js:13654:23)
at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:13711:35)
at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:14078:28)
at updateHostComponent (node_modules/react-dom/cjs/react-dom.development.js:14423:3)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:15087:14)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:17820:12)
at workLoop (node_modules/react-dom/cjs/react-dom.development.js:17860:24)
at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:17946:7)
at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:18837:7)
at performWork (node_modules/react-dom/cjs/react-dom.development.js:18749:7)
at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:18723:3)
at requestWork (node_modules/react-dom/cjs/react-dom.development.js:18592:5)
at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:18401:5)
at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:19069:3)
at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:19097:10)
at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:19154:10)
at ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:19416:3)
at /Users/eric/Development/roadmapsftw/develop/web/node_modules/react-dom/cjs/react-dom.development.js:19556:14
at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:18952:10)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:19552:5)
at Object.render (node_modules/react-dom/cjs/react-dom.development.js:19613:12)
at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:352:114)
at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:130:16)
at mount (node_modules/enzyme/build/mount.js:21:10)
at Context.<anonymous> (tests/test-navigation-Login.js:20:21)
当我在谷歌上搜索错误消息本身时，我得到了很多提示，表明组件导入是错误的。但是，我怀疑这里的情况，因为组件在多个浏览器中成功运行；我似乎无法通过使用 mount() 或 shallow() 的 Enzyme 创建它们。
我认为我的项目设置对于 Enzyme 是正确的；我整理了一组非常基本的组件并为它们进行了测试，并且该测试能够成功 mount()。因此，我认为任何建议的 setupTest.js 配置（例如设置适配器）或我调用测试脚本的方式都不是问题。
我真的不清楚如何从这里调试。堆栈跟踪的开始是我的测试脚本中挂载一个名为 Login 的组件的行。这是测试脚本中该组件的挂载语句：
const mounted = mount(
<IntlProvider locale='en'>
<MemoryRouter initialEntries={['/Login']}>
<TestContainer state={loginState}>
<Login />
</TestContainer>
</MemoryRouter>
</IntlProvider>
)
以下是测试脚本中那些失败的组件的导入语句。
import { IntlProvider } from 'react-intl'
import { MemoryRouter } from 'react-router-dom'
import { TestContainer } from './TestUtils.js'
import Login from '../src/navigation/Login'
当通过 Home 组件访问时，Login 组件在浏览器中工作正常；它通过以下导入语句导入到 Home 组件中：
import Login from '../navigation/Login'
失败的测试脚本和工作的应用程序之间的唯一区别是容器组件不同。但是，我的 mount 工作的超级简单测试使用相同的测试容器组件以相同的方式导入。
package.json 中的相关版本：
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-intl": "^2.7.2",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",
关于如何找到这里的故障情况有什么建议吗？我现在正在扯头发。
【问题讨论】：