reactjs - 不变违规 : Element type is invalid: error with Enzyme - help diagnosing?

Question

我正在尝试使用 Enzyme 来测试 create-react-app 应用程序中的 React UI 组件。我有一个使用 mount 工作的基本测试组件。这表明(至少对我而言)我已经正确设置了 enzyme 及其依赖项。

每当我尝试在我的一个更复杂的组件上运行测试时，我都会收到如下错误:

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'

失败的测试脚本与正常运行的应用程序之间的唯一区别是 Container 组件不同。但是，我的 mount 工作的 super 简单测试使用以相同方式导入的相同测试容器组件。

来自 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",

关于如何找到这里的失败条件有什么建议吗？在这一点上，我快要抓狂了。

Answer 1

好吧，当再一次通过这个问题时，我注意到我的一个导入语句实际上包含了文件后缀而不是省略了它。我以为我已经配置了项目，以便我可以跳过后缀。这适用于正常构建，但在测试运行中失败。因此，如果我在测试脚本中将“.jsx”添加到登录组件的导入中，我的测试现在就可以运行了。

现在开始弄清楚为什么会这样；在我没有使用 create-react-app 并因此手动构建 webpack.config.js 的先前项目中这不是问题。